:root { --ff-primary: "PTSans", "OpenSans", "Figtree", sans-serif; --ff-body: var(--ff-primary); --ff-heading: var(--ff-primary); --fw-regular: 400; --fw-bold: 700; --fs-300: 0.6125em; --fs-400: 0.75em; --fs-500: 0.875em; --fs-600: 1em; --fs-700: 1.1em; --fs-800: 1.4em; --fs-900: 1.7em; --br_full: 999px; --link-color: #3190dd; /* --mandant_bg: url(/userdata/images/bc_mandant_bg.jpg); */ } html[data-theme="light"] { --error: red; --clr-dark: #222222; --clr-white: #fff; --clr-light: #f5f5f5; --clr-grey: #c4c4c4; --bg-white: #fff; --if_bg_meeting: #f1f1f1; --svg_bg: var(--bg-light); --dark_none_white_block: block; --dark_p_30_light_p_zero: 0; --dark_mode_cursor: auto; --show_only_dark: none; --dark_bright: unset; --fc-white-8: #fff; --fc-primary: #313131; --fc-dark: #000; --fc-dark-8: #000; --weather: light; --fbi: unset; --ibf: invert(1); --blur: var(--bg-light); --blur_into_white: var(--bg-white); --blur_elevated_into_light: var(--bg-light); --blur_bg: none; --blur_settings: blur(0); --blur_elevated: var(--bg-white); --blur_nav: var(--bg-white); --blur_nav_active: var(--bg-light); } html[data-theme="dark"] { --error: red; --clr-dark: #222222; --clr-white: #2b2b2b; --clr-light: #202020; --clr-grey: #c4c4c4; --bg-white: #2b2b2b; --bg-light: #383838; --if_bg_meeting: #3a3a3a; --svg_bg: #ffffff0d; --dark_none_white_block: none; --dark_p_30_light_p_zero: 30px; --border: #4c4c4c; --dark_mode_cursor: url(/userdata/images/ls.png), auto !important; --dark_bright: brightness(1.5); --show_only_dark: flex; --fc-white-8: #fff; --fc-primary: #c4c4c4; --fc-dark: #ffffff; --fc-dark-8: #000; --weather: dark; --fbi: invert(1) brightness(20); --ibf: unset; --blur: rgb(0 0 0 / 76%); --blur_into_white: rgb(0 0 0 / 76%); --blur_elevated_into_light: rgb(32 32 32 / 50%); --blur_bg: radial-gradient(at 17% 2%, hsla(220, 60%, 60%, 1) 0px, transparent 50%), radial-gradient(at 82% 95%, hsla(147, 93%, 67%, 1) 0px, transparent 50%), radial-gradient(at 36% 45%, hsla(192, 72%, 77%, 1) 0px, transparent 50%), radial-gradient(at 95% 21%, hsla(292, 82%, 70%, 1) 0px, transparent 50%), radial-gradient(at 83% 85%, hsla(313, 95%, 79%, 1) 0px, transparent 50%), radial-gradient(at 83% 79%, hsla(252, 80%, 70%, 1) 0px, transparent 50%), radial-gradient(at 60% 41%, hsla(175, 63%, 64%, 1) 0px, transparent 50%); --blur_settings: blur(12.9px); --blur_elevated: rgb(32 32 32 / 50%); --blur_nav: rgb(32 32 32 / 94%); --blur_nav_active: var(--blur_elevated); } /* body, main, nav { cursor: var(--dark_mode_cursor); } */ /* Reset */ /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } /* Remove default margin */ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul[role="list"], ol[role="list"] { list-style: none; } /* Set core root defaults */ html:focus-within { scroll-behavior: smooth; } /* Set core body defaults */ body { text-rendering: optimizeSpeed; } /* A elements that don't have a class get default styles */ a:not([class]) { text-decoration-skip-ink: auto; } /* Make images easier to work with */ img, picture { max-width: 100%; display: block; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font: inherit; } /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Reset */ @font-face { font-family: "PTSans"; src: url("/userdata/01_Basic/02_Font/PTSans-Regular.ttf") format("truetype"); font-weight: 600; } @font-face { font-family: "PTSans"; src: url("/userdata/01_Basic/02_Font/PTSans-Bold.ttf") format("truetype"); font-weight: bold; } .container>.organigramm { width: 100%; float: left; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; overflow: auto; padding: 0 1rem; } .imgcontent { height: 100%; width: 100%; } .organigramm main { background: white; } .organigramm .level { display: flex; flex-direction: column; justify-content: center; position: relative; width: 100%; overflow: hidden; margin-bottom: 1rem; overflow-x: scroll; } .og_card.mandant:after { content: ""; width: 1px; height: 30px; background: var(--border); position: absolute; left: 50%; transform: translateX(-50%); bottom: -30px; } /* .einrichtung_container.level { padding-block-end: 60px; } */ /* .organigramm .bereich_container:before, .organigramm .einrichtung_container:before, .organigramm .fachbereich_container:before { content: ""; width: 100%; height: 1px; background: var(--border); position: absolute; left: 50%; transform: translateX(-50%); top: -30px; } */ .og_card.person_card>div { display: flex; align-items: center; justify-content: center; gap: 3px; } .og_card.person_card svg { fill: inherit; width: 11px; height: 11px; } .organigramm .og_card { padding: 10px; background: var(--bg-light); display: inline-block; border: 1px solid var(--border); border-radius: var(--br); text-align: left; position: relative; white-space: nowrap; } .og_card.department { cursor: pointer; } .og_card.department.einrichtung { cursor: auto; } .organigramm .person_card { border: none; display: flex; flex-direction: column; color: var(--fc-dark); padding-block-start: 5px; font-size: 14px; align-items: flex-start; background: transparent; padding-inline-start: 0; } .og_card.department.active .og_card.person_card { color: var(--clr-mandant); } .og_card.department.active .og_card.person_card svg { fill: var(--clr-mandant); } span.role_span { font-size: 10px; } .organigramm .person_card .active { background: var(--bg-white); border: none; display: flex; flex-direction: column; font-size: var(--fs-700); color: var(--fc-dark); padding-block-start: 5px; } /* .organigramm .person_card { background: var(--bg-white); border: none; display: flex; flex-direction: column; font-size: var(--fs-700); color: var(--fc-dark); padding-block-start: 5px; } */ .collection_list.stellen>.collection_container { background: var(--blur_elevated); border-radius: var(--br); overflow: hidden; transition: 300ms; height: 100%; } .collection_list.stellen .title { padding-inline: 1rem; -webkit-line-clamp: 4; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box; padding-block-end: 10px; border-bottom: 1px solid var(--border); } .collection_content.stellen_verlinkung_1 a, .collection_content.stellen_verlinkung_2 a, .collection_content.stellen_verlinkung_3 a, .collection_content.stellen_verlinkung_4 a { padding: 0.5rem 1rem; height: auto; max-height: 90px; overflow: hidden; border-bottom: 1px solid var(--border); display: block; color: #3b3bff; text-decoration: underline; } .grid_knowledgecenter { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 gleich große Spalten */ gap: 15px; } a.kc_category_link { display: block; overflow: hidden; } .collection_content.stellen_verfuegbarkeit { margin: 1rem; background: var(--bg-light); display: inline-block; border-radius: var(--br); padding: 2px 10px; font-size: var(--fs-300); opacity: 0.8; float: right; } .collection_content.stellen_art { padding-inline: 1rem; margin-top: 1.5rem; font-size: var(--fs-300); opacity: 0.7; } .collection_list.stellen .collection_container .collection_content.stellenbilder img { height: auto !important; aspect-ratio: 4/3 !important; } .collection_list.stellen { width: auto; padding: 0; } .stellen_wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; } /* .organigramm .og_card.mandant:after, .organigramm .landesvorstand .person_card:after, .organigramm .og_card.title_card.active:after, .organigramm .og_card.title_card_dep.active:after, .organigramm .bereich .og_card.person_card:after, .organigramm .title_card_space.active:after { content: ""; width: 1px; height: 30px; background: var(--border); position: absolute; left: 50%; transform: translateX(-50%); top: 100%; } */ .organigramm .landesvorstand.level { padding-block-end: 30px; } /* .organigramm .bereich .title_card:before, .organigramm .title_card_space:before, .organigramm .title_card_dep:before, .organigramm .fachbereich .title_card:before { content: ""; width: 1px; height: 30px; background: var(--border); position: absolute; left: 50%; transform: translateX(-50%); top: -30px; } */ .organigramm .person_cards { display: flex; gap: 15px; } .organigramm .mandant.level { margin: 0; padding: 0 !important; overflow: hidden; } .organigramm .og_card.title_card { margin-bottom: 30px; } .organigramm .og_card.title_card_space { margin-bottom: 30px; } .organigramm .og_card.title_card_dep { margin-bottom: 30px; } .organigramm .active { color: var(--clr-mandant); border-color: var(--clr-mandant); background: #ff00001f; } .organigramm .title_cards, .organigramm .einrichtung_cards { display: flex; cursor: pointer; gap: 15px; justify-content: center; } html { scroll-behavior: smooth; } body { background-image: var(--blur_bg); background-color: var(--clr-light); font-size: var(--fs-600); font-weight: var(--fw-regular); line-height: 1.42857143; font-family: var(--ff-body); color: var(--fc-primary); overflow-x: hidden; margin: 0; } strong { color: var(--fc-dark); } .wetter { width: 100%; float: left; margin-block-end: 2rem; } .form-group.main_contact_id { display: none; } .hero_bg img { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; } span.hint { font-size: calc(var(--fs-300) - 3px); background: red; color: var(--fc-white-8); width: 15px; height: 15px; border-radius: 999px; display: flex; justify-content: center; align-items: center; line-height: 1; position: relative; left: -10px; flex-shrink: 0; } nav span.hint { left: -0; } .profil_banner.certificate { width: 33.33%; float: left; padding: 0 15px; } div#hero_content h1 { color: var(--fc-white-8); background: var(--clr-mandant); display: inline; position: relative; padding: 5px; padding-right: 7px; line-height: 1.4; padding-left: 0; } /* Spezifische Anpassungen für Firefox */ @supports (-moz-appearance: none) { div#hero_content h1 { /* Hier spezifische Styles für Firefox hinzufügen */ display: inline; /* Beispiel */ } } .profil_banner.certificate { width: 33.33%; float: left; padding: 2rem; position: relative; border-radius: var(--br); overflow: hidden; background: var(--bg-white); border: 1px solid var(--border); } div#hero_content h1:before { content: ""; background: var(--clr-mandant); width: 31px; height: 100%; position: absolute; left: -30px; top: 0; } /* .dashboard div#hero_content h1:before { min-height: 98px; } */ div#hero_content p { display: block; margin-top: 1rem; } .error { background: #ffe1e1; border-radius: 7px; padding: 5px; color: var(--error); text-align: center; border: 1px solid var(--error); } .back_to_overview { display: none; } .error:empty { display: none; } .owl-carousel.owl-loaded { float: left; } input:disabled, select:disabled { cursor: not-allowed; } .input_change_list_card_form { background: var(--clr-mandant); padding: 10px 20px; border-radius: var(--br); color: var(--fc-white-8); cursor: pointer; } .logo_1 img { height: 144px !important; object-fit: contain; } .white_bg .row { background: var(--bg-white); border-radius: var(--br); border: 1px solid var(--border); } img.profil_img_nav_bar { width: 35px !important; border-radius: 999px; height: 35px !important; } .infoboard_boxes { padding: 1rem; border-bottom: 1px solid var(--border); width: 100%; margin-bottom: 1rem; float: left; } .sidebuttons { position: fixed; bottom: 1rem; right: 1rem; z-index: 1; } .sternentor img { max-width: 15px; } .input_protected_group { width: 100%; float: left; padding-block-end: 1rem; } .protected_wrapper h2 { font-family: "Bilbo"; font-size: 40px; } .sternentor { float: right; } .protected_overlay p.error { margin: 1rem 0; } .input_protected_group .label { display: none; } .highlight_knowledgecenter .collection_list.knowledgecenter-post .collection_content.kc_img { display: block; } .workspace_group { width: 100%; float: left; padding: 2rem; } .highlight_knowledgecenter .collection_list.knowledgecenter-post .collection_container { display: flex; flex-direction: row-reverse; height: 150px; background: var(--blur_elevated); border-radius: var(--br); overflow: hidden; justify-content: flex-end; gap: 2rem; border: 2px solid red; } .highlight_knowledgecenter .collection_list.knowledgecenter-post .collection_container:hover { background: var(--blur_elevated); } .highlight_knowledgecenter .collection_list.knowledgecenter-post .collection_content.kc_img img { width: 230px !important; height: 100% !important; object-fit: cover; margin: 0; } .highlight_knowledgecenter .collection_list.knowledgecenter-post { width: 100%; padding: 0; } .dashboard .filegallery_content_file { display: flex; align-items: center; gap: 5px; padding-block: 5px; background: var(--clr-mandant); padding: 1rem; border-radius: var(--br_full); color: var(--fc-white-8); } .filegallery_content { border-radius: var(--br); overflow: hidden; position: relative; } .warm .filegallery_content { border-left: none; border-right: none; border-top: none; border-radius: 0; padding-top: 0; } .warm .future_appointments { border: none; border-radius: 0; } .highlight_knowledgecenter { width: 100%; float: left; padding-block-end: 3rem; } .highlight_knowledgecenter .collection_list h3.collection_content.knowledgecenter-post__title.title.custom { font-size: var(--fs-700); font-weight: bold; } .highlight_knowledgecenter .collection_link, .highlight_knowledgecenter .collection_link a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 9; } .highlight_knowledgecenter .collection_list.knowledgecenter-post .collection_container:after { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%) rotate(135deg); } .protected_overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .protected_wrapper { padding: 2rem; background: var(--blur_elevated); max-width: 440px; border-radius: var(--br); border: 1px solid var(--border); float: left; display: flex; flex-direction: column; gap: 1rem; } .schuller-of-the-day div#hero_content { display: none !important; } .schuller-of-the-day .container, .schuller-of-the-day .main-screen { padding: 0; max-width: unset; } .certificate_wrapper { display: flex; align-items: center; justify-content: space-between; background: var(--clr-mandant); padding: 2rem; border-radius: var(--br); border: 1px solid var(--border); color: var(--fc-white-8); } .certificate_button { background: var(--fc-white-8); color: black; padding: 10px 20px; border-radius: var(--br); } .schuller-of-the-day main { padding-top: 0; } body.schuller-of-the-day { overflow: hidden; } .schuller-of-the-day iframe { min-height: 100vh; border-radius: 0; } .schuller-of-the-day div#horizontal_nav_bar { display: none; } /* ===== Scrollbar CSS ===== */ /* Firefox */ * { scrollbar-width: auto; scrollbar-color: #e0e0e0 #ffffff; } /* Chrome, Edge, and Safari */ *::-webkit-scrollbar { width: 5px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: var(--bg-light); border-radius: 10px; border: none; } div#mandant_switch { z-index: 1; } main { width: calc(100% - 250px); float: right; min-height: 100vh; z-index: 0; position: relative; background: var(--blur); } .collection_list.news.ankuendigungen.not_read .collection_container { outline: none; } r .filter_display { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 1rem; padding: 15px; flex-wrap: wrap; margin: 0 0 0.5rem; } button#backButton { background: none; color: var(--fc-dark); padding: 0 0 10px; opacity: 0.5; position: relative; margin: 1rem; } button.back_button { background: none; color: var(--fc-dark); padding: 0 0 10px; opacity: 0.5; position: relative; } button.back_button:before { width: 5px; height: 5px; transition: 0.5s; transform: rotate(315deg); position: relative; cursor: pointer; background: transparent !important; border-top: 1px solid var(--fc-dark); border-left: 1px solid var(--fc-dark); content: ""; float: left; top: 12px; margin-right: 4px; } .collection_content:empty { display: none; } button#backButton:before { width: 5px; height: 5px; transition: 0.5s; transform: rotate(315deg); position: relative; cursor: pointer; background: transparent !important; border-top: 1px solid var(--fc-dark); border-left: 1px solid var(--fc-dark); content: ""; float: left; top: 8px; margin-right: 4px; } button#backButton:hover { opacity: 1; } ::placeholder { color: var(--fc-primary); } div#hero_content input { border-color: var(--fc-white-8); background: var(--fc-white-8); color: var(--fc-dark-8); padding: 10px 15px; } input, select, textarea { padding: 10px; width: 100%; border: 1px solid var(--border); font-family: inherit; border-radius: var(--br); background: transparent; color: var(--fc-dark); accent-color: var(--clr-mandant); } div#mandant_switch { position: fixed; top: 0; right: 0; } .toggle_mandant_switch { background: var(--blur_elevated); padding: 10px; border-radius: var(--br); border: 1px solid var(--border); cursor: pointer; font-size: var(--fs-300); position: fixed; right: 1rem; z-index: 1; border-left: none; bottom: 1rem; border: 1px solid var(--border); box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; opacity: 0.5; } .toggle_mandant_switch:hover { opacity: 1; } .toggle_mandant_switch svg { width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; fill: var(--clr-mandant); } .mandant_switch { display: none; flex-direction: column; } .mandant_switch.show_mandants { display: flex; width: 370px; background: var(--blur_elevated); height: 100vh; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; padding: 2rem; padding-top: 5rem; } .mandant_switch.show_mandants>h2 { border-bottom: 1px solid var(--fc-dark); padding-block-end: 15px; } .mandant_link a { position: relative; display: block; padding-block: 10px; border-bottom: 1px solid var(--border); color: var(--fc-dark); } .mandant_link.active a { color: var(--clr-mandant); font-weight: var(--fw-bold); } .mandant_link a:hover { background: var(--bg-light); } .mandant_link a:after { width: 7px; height: 7px; transition: 0.5s; transform: translateY(-50%) rotate(135deg); position: absolute; cursor: pointer; background: transparent !important; border-top: 1px solid var(--fc-dark); border-left: 1px solid var(--fc-dark); content: ""; top: 50%; right: 1rem; } .mandant_link.active img { border: 1.5px solid var(--clr-mandant); width: 140px !important; border-right: none; opacity: 1; } .mandant_link img { background: var(--fc-white-8); padding: 0.8rem; border-top-left-radius: var(--br); border-bottom-left-radius: var(--br); width: 120px !important; border-right: none; transition: 300ms; } .mandant_link img:hover { width: 140px !important; } textarea { resize: vertical; min-height: 200px; } a:hover { filter: brightness(1); } input.button { cursor: pointer; border: none; } input.button:hover { opacity: 0.95; } .owl-item a { width: 100% !important; } figure.mz-figure.mz-hover-zoom.mz-no-zoom.mz-ready { width: 100%; height: 100%; } .back_to_overview a { background: var(--clr-mandant); color: var(--clr-white); padding: 10px 15px; border-radius: var(--br); border: none; cursor: pointer; } .full_preview .filter_display { display: none; } .textcontent li { list-style: inherit; } a.button_filter.a-filter { background: var(--clr-mandant); color: var(--clr-white); padding: 10px 15px; float: left; border-radius: var(--br); } a.button_filter.o-filter { background: var(--blur_elevated); padding: 10px 15px; float: left; border-radius: var(--br); } .collection_content.cg_teaser { padding-block-end: 1rem; } .row { float: left; width: 100%; } #cookie-bar { position: fixed; bottom: 0; width: 100%; background-color: rgba(255, 255, 255, 0.7); padding: 10px 20px; z-index: 200; min-width: 320px; } #cookie-bar #cookie-bar-button { float: right; margin-left: 20px; display: inline-block; padding: 8px 10px; min-width: 150px; text-transform: uppercase; border: 1px solid #ff6532; color: var(--clr-white); cursor: pointer; background-color: #ff6532; text-align: center; } #cookie-bar #cookie-bar-button:hover { background-color: #e43900; border-color: #e43900; } #cookie-bar #cookie-bar-button:active { background-color: #b22c00; border-color: #b22c00; } #cookie-bar #cookie-bar-prompt-button { white-space: nowrap; } #cookie-bar>p { float: left; margin: 0; line-height: 40px; } #cookie-bar:after { clear: both; display: block; content: " "; } ol li, ul li { list-style: none; } .main-screen { padding: 3rem 0; position: relative; float: left; width: 100%; } /* .main-screen.grey { background-color: var(--clr-light); } */ .container { margin-inline: auto; padding-left: 15px; padding-right: 15px; } .pop-up-element { display: none; } .pop-up-element:first-child { display: block; } .pop-up-button-group .row { display: flex; justify-content: center; } .pop-up-element .row { cursor: pointer; } .pop-up-element.current { display: block; } .pop-up-button { cursor: pointer; border: 1px solid var(--border); background: var(--blur_nav_active); padding: 10px 20px; border-radius: var(--br); text-align: center; } .pop-up-button.current { background: var(--clr-mandant); color: var(--fc-white-8); border: 1px solid var(--clr-mandant); } .faq_nearest_search { display: none; } div#footer-header { float: left; width: 100%; } .collection_link a { opacity: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 0; z-index: 2; } .collection_list { width: 33.33%; float: left; padding: 15px; } img { height: 100% !important; width: 100% !important; object-fit: cover; max-width: 100%; } h1, h2, h3, h4, h5, h6 { line-height: 1.3; clear: both; font-weight: var(--fw-bold); color: var(--fc-dark); margin: 0 0 10px; } h1 { font-size: var(--fs-900); } /* h2::before { content: "——"; float: left; width: 100%; color: var(--clr-mandant); letter-spacing: -2px; } */ h2.termine_title { margin: 0; } button.infoboard_day_button { background: none; color: var(--fc-primary); padding: 0; } h3.collection_content.projektverlauf__title.title.custom:after { content: "——"; float: left; width: 100%; color: #6ac2c4; letter-spacing: -2px; } h2 { font-size: var(--fs-800); } h3 { font-size: var(--fs-700); } h4, h5 { font-size: var(--fs-600); } h6 { font-size: var(--fs-500); } a { text-decoration: none; } .owl-nav { display: flex; justify-content: center; gap: 10rem; align-items: center; } .collection_link a:hover { opacity: 0; } /* Kollektion */ .full_preview .collection_full { display: block !important; } .collection_list, .collection_container { position: relative; z-index: 0; } .fade { opacity: 1; } .modal { display: block; } .modal.success .modal-header { border-color: var(--main-color); background-color: var(--main-color); color: var(--clr-white); } .modal.success .modal-header { border-color: var(--main-color); background-color: var(--main-color); color: var(--clr-primary-white); } div#requestbox { position: fixed; width: 100%; top: 50%; left: 50%; z-index: 999; height: 100%; transform: translate(-50%, -50%); } .modal-dialog { position: fixed; width: 100%; max-width: 350px; top: 50%; left: 50%; z-index: 999999; background: var(--bg-light); text-align: center; padding: 2rem; color: var(--clr-mandant); border-radius: var(--br); box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; transform: translate(-50%, -50%); border: 1px solid var(--clr-mandant); } div#requestbox:after { content: ""; background: #00000075; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } button.close { margin: 0 0 1rem; } div#cookiewarnung { position: fixed; bottom: 40px; background: #f2f6ff; color: #000; z-index: 99999999; width: 80%; text-align: center; padding: 15px; left: 50%; transform: translateX(-50%); border-radius: 5px; border: 1px solid #d7e0ff; box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px; } .cookie-option-container { margin-top: 10px; } .cookie-option { cursor: pointer; display: inline-block; padding: 7px !important; border-radius: 5px; background: var(--clr-mandant); color: var(--fc-dark); margin: 1rem 0 0; } div#cookie-config { display: none; left: -100%; transition: 1s; } .owl-item img { /* height: 550px!important; */ /* border-radius: var(--br)!important; */ overflow: hidden !important; object-fit: cover; max-width: 100% !important; max-height: 100% !important; aspect-ratio: 4/3 !important; } .owl-nav span { font-size: 40px; } figure.mz-figure.mz-hover-zoom.mz-ready.mz-no-zoom { display: flex; justify-content: center; align-items: center; } figure.mz-figure.mz-hover-zoom.mz-ready.mz-no-zoom img { overflow: hidden; } div#cookie-config.show { display: block; position: fixed; left: 0; top: 0; bottom: 0; background: var(--clr-white); max-width: 300px; z-index: 99999999999; overflow-y: auto; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; } #cookie-config .cookie-config-close { background: #f2f6ff; color: #000; padding: 10px; position: relative; cursor: pointer; } #cookie-config input { margin-right: 10px; } #cookie-config label { font-weight: normal; color: #000; } .cookie-config-close:after, .cookie-arrow { position: absolute; width: 10px; height: 10px; transform: rotate(225deg); box-shadow: -2px 2px 0 rgba(90, 156, 157, 0.5); content: ""; right: 20px; top: 20px; transition: 0.1s; } .cookie-config-options.open .cookie-arrow { transform: rotate(315deg) !important; } .cookie-config-options { background: #f2f6ff; padding: 10px; cursor: pointer; position: relative; } .cookie-config-configuration .cookie-config-options:nth-child(2) { border-bottom: 1px solid #d5d5d5; } .config-child { display: none; background: var(--clr-white); padding: 10px; } .cookie-config-save { padding: 10px; text-align: center; background: #68c567; cursor: pointer; margin: 20px 15px; color: var(--clr-white); border-radius: 5px; } .cookie-config-configuration { margin-top: 10px; } .cookie-config-configuration>p { padding: 10px; font-weight: bold; } .cookie-config-description { padding: 10px; font-size: 15px; } .cookie_conflict_youtube { display: flex; justify-content: center; flex-wrap: wrap; flex-direction: column; align-items: center; border: 1px solid #f07474; margin: 2rem 0; text-align: center; padding: 2rem; border-radius: 10px; background: var(--blur_nav); font-size: 17px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; float: left; width: 100%; } .cookie_conflict_youtube a { text-decoration: underline; font-weight: 500; } .tabcontent, .tabcontentSection { display: none; } div#submit_button { display: flex; width: 100%; float: left; } .input_collection_link_checkbox { cursor: pointer !important; } .form-group { float: left; width: 100%; padding: 10px 0; } .tab { display: none; } input#button { background: var(--clr-mandant); color: var(--fc-white-8); padding: 10px 15px; cursor: pointer; border: none; width: auto; } .meal_delivery_group input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; cursor: pointer; padding: 0; } .meal_delivery_group input[type="checkbox"]:focus { outline: 0; } .meal_delivery_group .checkbox { height: 23px; width: 43px; border-radius: 16px; display: inline-block; position: relative; margin: 0; border: 2px solid var(--clr-mandant); background: var(--blur_elevated); transition: all 0.2s ease; } .meal_delivery_group .checkbox:after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--clr-mandant); box-shadow: 0 1px 2px rgba(44, 44, 44, 0.2); transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35); } .meal_delivery_group .checkbox:checked { border-color: var(--clr-mandant); } .meal_delivery_group .checkbox:checked:after { transform: translatex(20px); } button, a.button, a.button_save { background: var(--clr-mandant); color: var(--fc-white-8); padding: 10px 15px; border-radius: var(--br); cursor: pointer; border: none; } button:hover { opacity: 0.9; } .step.active { opacity: 1; } a { color: inherit; cursor: pointer; } /* end* Header */ .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; padding-block-end: 1rem; } .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { float: left; } .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } .col-xs-10 { width: 83.33333333%; } .col-xs-9 { width: 75%; } .col-xs-8 { width: 66.66666667%; } .col-xs-7 { width: 58.33333333%; } .col-xs-6 { width: 50%; } .col-xs-5 { width: 41.66666667%; } .col-xs-4 { width: 33.33333333%; } .col-xs-3 { width: 25%; } .col-xs-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; } .col-xs-pull-12 { right: 100%; } .col-xs-pull-11 { right: 91.66666667%; } .col-xs-pull-10 { right: 83.33333333%; } .col-xs-pull-9 { right: 75%; } .col-xs-pull-8 { right: 66.66666667%; } .col-xs-pull-7 { right: 58.33333333%; } .col-xs-pull-6 { right: 50%; } .col-xs-pull-5 { right: 41.66666667%; } .col-xs-pull-4 { right: 33.33333333%; } .col-xs-pull-3 { right: 25%; } .col-xs-pull-2 { right: 16.66666667%; } .col-xs-pull-1 { right: 8.33333333%; } .col-xs-pull-0 { right: auto; } .col-xs-push-12 { left: 100%; } .col-xs-push-11 { left: 91.66666667%; } .col-xs-push-10 { left: 83.33333333%; } .col-xs-push-9 { left: 75%; } .col-xs-push-8 { left: 66.66666667%; } .col-xs-push-7 { left: 58.33333333%; } .col-xs-push-6 { left: 50%; } .col-xs-push-5 { left: 41.66666667%; } .col-xs-push-4 { left: 33.33333333%; } .col-xs-push-3 { left: 25%; } .col-xs-push-2 { left: 16.66666667%; } .col-xs-push-1 { left: 8.33333333%; } .col-xs-push-0 { left: auto; } .col-xs-offset-12 { margin-left: 100%; } .col-xs-offset-11 { margin-left: 91.66666667%; } .col-xs-offset-10 { margin-left: 83.33333333%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-8 { margin-left: 66.66666667%; } .col-xs-offset-7 { margin-left: 58.33333333%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-5 { margin-left: 41.66666667%; } .col-xs-offset-4 { margin-left: 33.33333333%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-2 { margin-left: 16.66666667%; } .col-xs-offset-1 { margin-left: 8.33333333%; } .col-xs-offset-0 { margin-left: 0; } /* Slideshow */ #slider-wrapper { position: relative; } div#slider { height: 100%; position: relative; } div#slider-title .container { width: 100%; } /* Footer */ #footer { clear: both; padding: 70px 0 25px 0; font-size: 15px; position: relative; float: left; width: 100%; } .footer-sitemap { height: auto; clear: both; width: 100%; margin: 0 auto; display: block; float: left; margin-bottom: 40px; } .footer-sitemap ul { padding: 0; margin: 0; width: 100%; display: flex; justify-content: center; } #footer li { list-style-type: none; } .footer-sitemap li.level_1 { font-weight: 500; font-size: 20px; width: auto; float: left; padding: 0px 20px; } .component.privacy_policy { display: flex; justify-content: center; } #footer li.level_1 a { margin-bottom: 7px; display: inline-block; } .footer-sitemap li.level_2 { font-weight: normal; font-size: 15px; text-transform: initial; } div#privacy-policy { padding: 15px 0; clear: both; text-align: right; } #privacy-policy .footer-1 { text-align: left; } div#privacy-policy ul li { display: inline-block; padding: 0 10px; } /* End Footer */ .owl-dots { height: 10px; } .owl-dots { position: relative; float: left; width: 100%; height: 20px; } .owl-dot span { height: 10px; width: 10px; background: var(--clr-grey); position: relative; float: left; border-radius: 500px; margin: 0 2px; opacity: 0.5; } .owl-dot.active span { position: relative; float: left; height: 10px; width: 10px; background: var(--clr-grey); border-radius: 500px; opacity: 1; } .owl-dots { position: absolute; width: 100%; height: auto; text-align: center; display: flex; align-items: center; justify-content: center; bottom: 23px; z-index: -1; } .youtubecontent { width: 100%; float: left; } iframe { width: 100%; height: 450px; border-radius: var(--br); } .content_guide_collections { width: 100%; flex: 1; } .content-guide .filter_display { width: 20%; float: left; gap: 0.5rem; flex-direction: column; align-items: end; position: sticky; top: 90px; display: flex; padding-right: 1rem; } .content_guide_wrapper { display: flex; flex-wrap: wrap; align-items: flex-start; } .contact_card_list.observer { display: none; } h3.collection_content.content_guide__title.title.custom { font-size: var(--fs-800); } .collection_list.content_guide.not_read .collection_container { outline: none; } .collection_list.content_guide { width: 80%; max-width: 700px; padding: 0; padding-block-end: 2rem; } div#hero_content { height: 200px; overflow: hidden; position: relative; color: var(--fc-white-8); background-image: var(--mandant_bg); background-repeat: no-repeat; background-size: cover; background-color: #2a2a2a; background-position: center; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 1px dashed var(--clr-mandant); outline-offset: 2px; } .dashboard div#hero_content { height: 250px; } div#hero_content>.container { height: 100%; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; gap: 1rem; } .dashboard div#hero_content>.container { padding-top: 20px; } .breadcrumb span { display: flex; align-items: center; gap: 4px; line-height: 1; } .chevron_right { width: 5px; height: 5px; transition: 0.5s; transform: rotate(135deg); cursor: pointer; background: transparent !important; border-top: 1px solid var(--fc-white-8); border-left: 1px solid var(--fc-white-8); content: ""; position: relative; } .dashboard .breadcrumb { display: none; } .breadcrumb { padding-inline: 15px; } select { background: var(--blur_elevated); } .hero_bg video { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; filter: brightness(0.8); object-fit: cover; } .forwarding-wrapper { display: flex; gap: 1rem; white-space: nowrap; overflow-x: scroll; margin-bottom: 1rem; } div#mandant_switch_responsiv { width: 100%; float: left; padding-inline: 10px; padding-block-end: 1rem; } .knowledgecenter-post a.button.bookmark { display: none; } div#mandant_switch_responsiv .mandant_switch { position: relative; top: unset; right: unset; display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 111px; } div#mandant_switch_responsiv .mandant_link img, div#mandant_switch_responsiv .mandant_link.active img { width: 100% !important; padding: 1rem; border-radius: var(--br) !important; border-right: 1px solid var(--border); height: 80px !important; object-fit: contain; } div#mandant_switch_responsiv .mandant_link.active img { border-color: var(--clr-mandant) !important; border-right: 1px solid var(--clr-mandant); } div#mandant_switch_responsiv .mandant_link { width: 100%; } .forwarding_content { display: flex; align-items: center; gap: 0.5rem; line-height: 1; } .forwarding_content_container { background: var(--clr-mandant); padding: 10px; border-radius: var(--br); } .forwarding_text { display: flex; align-items: center; gap: 2rem; color: var(--fc-white-8); } .svg_content { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; padding: 10px; background: var(--svg_bg); border-radius: var(--br); } .svg_content svg { fill: var(--clr-mandant); } .forwarding_image svg { fill: var(--fc-white-8); width: 16px; height: 16px; } .forwarding_text:after { content: ""; background-image: url(/userdata/images/chevron-right.svg); display: block; width: 10px; height: 12px; background-repeat: no-repeat; background-size: contain; float: right; filter: invert(1); } /* Hide scrollbar for Chrome, Safari and Opera */ .forwarding-wrapper::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .forwarding-wrapper { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .group { padding: 30px 20px; border-radius: var(--br); border: 1px solid var(--border); float: left; width: 100%; background: var(--blur_elevated); } .major_group .row { padding: 30px 25px; border-radius: var(--br); border: 1px solid var(--border); float: left; width: 100%; background: var(--blur_elevated); } /* .collection_list.not_read .collection_container:after { content: '1'; width: 20px; height: 20px; background: red; position: absolute; top: 1rem; right: 1rem; border-radius: 999px; color: var(--fc-white-8); font-size: var(--fs-300); text-align: center; display: flex; justify-content: center; align-items: center; } */ .collection_list.not_read .collection_container { outline: 1px solid red; outline-offset: 0px; outline-style: dashed; } h3.title.custom { margin: 0; } .icon { margin-bottom: 1.5rem; } .icon img { max-width: 40px; float: right; } .dashboard .kc_card_list { display: none; } .dashboard .kc_category_list.col-sm-12.col-md-12.col-lg-8 { width: 100%; padding-inline: 0; } .dashboard .kc_group_container { background: var(--blur_elevated); width: 100%; float: left; padding: 2rem; border: 1px solid var(--border); border-radius: var(--br); margin-bottom: 2rem; } .firmenwiki_link_dashboard a { color: var(--clr-mandant); text-decoration: underline; } .dashboard .owl-nav { display: flex; justify-content: start; gap: 1rem; align-items: center; } .dashboard .owl_kc .owl-nav span { font-size: 20px; background: var(--clr-mandant); color: var(--fc-white-8); width: 30px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; margin-top: 0.5rem; } .hide { display: none; } /* Anruferfassung */ .firmeninformationen .group_container { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--border); } .firmeninformationen .group_container:last-child { border-bottom: none; } .firmeninformationen .img_container { max-width: 110px; background: var(--fc-white-8); height: 100%; position: relative; display: flex; padding: 1rem 5px; border-radius: var(--br); } .firmeninformationen .stats_container { width: 70%; padding: 10px 0px; font-size: var(--fs-300); } .stats_container { font-size: var(--fs-300); } .firmeninformationen .stats_container h5 { margin: 0; } .firmeninformationen { display: flex; flex-direction: column; gap: 1rem; } /* Anruferfassung Ende*/ /* Changelog */ .collection_list.changelog { width: 100%; padding-block-start: 0; padding-left: 2rem; border-left: 2px solid var(--border); padding-block-end: 5rem; } .collection_list.changelog:before { content: ""; width: 16px; height: 16px; background: var(--border); border-radius: 999px; position: absolute; left: -9px; top: 0; border: 1px solid var(--clr-grey); } .collection_list.changelog.not_read .collection_container { outline: none; display: flex; gap: 2rem; } .warm .inhouse_and_outhouse { display: none; } .warm button.infoboard_day_button { top: unset; background: transparent; padding: 0; color: var(--fc-dark); margin-bottom: 5px; } .warm .infoboard_boxes { margin-block-end: 1rem; padding-top: 6rem; border: none; gap: 1rem; } .warm .infoboard_boxes h2 { position: absolute; top: 2rem; left: 3rem; } .warm button.infoboard_day_button { font-size: var(--fs-300); } .anpassung_melden .row { background: var(--blur_elevated); padding: 2rem 2rem 1rem 2rem; border-radius: var(--br); border: 1px solid var(--border); } .collection_list.changelog.not_read .collection_container .collection_content.changelog_info { flex: 1 1 40%; } .collection_list.changelog.not_read .collection_container .collection_content.changelog_text { flex: 1 1 60%; border-bottom: 1px solid var(--border); padding-block-end: 1rem; } .collection_content.changelog_date { font-size: var(--fs-300); opacity: 0.7; margin-bottom: 0.5rem; } .collection_content.changelog_category { display: inline-block; font-size: var(--fs-300); padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--br); background: var(--border); } h3.collection_content.changelog__title.title.custom { font-size: var(--fs-700); margin-block-end: 0.5rem; } .anpassung_melden .row img { max-width: 40px; margin-bottom: 1rem; filter: var(--fbi); } .collection_content.changelog_category.design { background: #8a5eb3; color: var(--fc-white-8); border-color: #8a5eb3; } .collection_content.changelog_category.funktion { background: cornflowerblue; color: var(--fc-white-8); border-color: cornflowerblue; } .changelog_collection { background: var(--blur_elevated); width: 100%; float: left; padding: 2rem 3rem 0 3rem; border-radius: var(--br); border: 1px solid var(--border); color: var(--fc-dark); overflow-y: scroll; max-height: 615px; } .changelog_collection:before { content: "Updates"; font-size: var(--fs-800); font-weight: bold; margin-bottom: 1.5rem; float: left; margin-left: -10px; } .collection_content.changelog_text ul { padding-left: 20px; margin-block-end: 0; } .sitepart_3 h2:before { display: none; } .collection_content.changelog_text a { color: cornflowerblue; } /* Changelog Ende*/ /* Learning Ende*/ .profile_certificate_wrapper { display: flex; width: 100%; gap: 1rem; flex-wrap: wrap; } .profile_certificate_wrapper a { flex: 1 1 50%; } .el_category { background: var(--blur_elevated); border-radius: var(--br); overflow: hidden; transition: 300ms; border: 1px solid var(--border); display: flex; align-items: center; } .certificate_frame video { width: 100%; border-radius: var(--br); } .e-learning .profile_certificate_wrapper a { flex: 1 1 60%; } ::placeholder { opacity: 0.5; } input.submit_answers, .next, .prev { background: var(--clr-mandant); color: var(--fc-white-8); padding: 10px 15px; border-radius: var(--br); cursor: pointer; border: none; width: auto; flex-shrink: 0; } .profil_certificate.not_finished { border-color: #bc2929; background: #ff00000a; } .prev { background-color: var(--blur); color: var(--fc-primary); } .answer_input.checked { outline: 2px solid var(--clr-mandant); } img.el_img { height: 150px !important; max-width: 150px !important; } .dashboard .profil_banner { padding-block-start: 1rem; display: flex; flex-direction: column; gap: 1rem; } p.el_tags { opacity: 0.7; font-size: var(--fs-300); } .certificate_question { background: var(--blur_elevated); padding: 2rem; border-radius: var(--br); border: 1px solid var(--border); display: none; } .certificate_question.active { display: block; } input.submit_answers { display: none; } .question_nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0 0; } .answer_input label, .answer_input .label { width: 100%; display: block; cursor: pointer; } .answer_input label { padding: 1rem; } .answer_input input { padding: 1rem; } .answer_input input[type="checkbox"] { display: none; } .answer_input_group { display: flex; gap: 1rem; flex-wrap: wrap; } h3.certificate_question_headline { margin-bottom: 1rem; } .answer_input:hover { background: var(--border); } .organigramm_temp { overflow: hidden; } .organigramm_temp div#horizontal_nav_bar, .organigramm_temp div#hero_content { display: none !important; } .organigramm_temp .main-screen { padding: 0; } .organigramm_temp embed { height: 100vh; width: 100% !important; max-width: unset !important; } .organigramm_temp .container { width: 100%; padding: 0; } .answer_input { display: flex; align-items: center; flex-direction: row-reverse; width: 50%; float: left; gap: 0.5rem; background: var(--blur); border-radius: var(--br); justify-content: flex-end; flex: 1 1 40%; position: relative; } .el_category_line_list { display: flex; gap: 1rem; flex-wrap: wrap; } a.el_category_link { flex: 1 1 100%; } .el_category:hover { transform: translateY(-3px); } .el_content { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-inline: 2rem; height: 100px; } .card { display: flex; align-items: center; justify-content: center; flex-direction: column; scale: 0.4; width: 90px; } .card .percent { position: relative; } .card svg { position: relative; width: 210px; height: 210px; transform: rotate(-90deg); } .card svg circle { width: 100%; height: 100%; fill: none; stroke: #f0f0f0; stroke-width: 10; stroke-linecap: round; } .card svg circle:last-of-type { stroke-dasharray: 625px; stroke-dashoffset: calc(625px - (625px * var(--percent)) / 100); stroke: var(--clr-mandant); } .card .number { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .card .number h3 { font-size: 3.5rem; font-weight: var(--fw-medium); } .card .number h3 span { font-size: 2rem; } .card .title h2 { margin: 25px 0 0; } a.el_post_link { width: 100%; float: left; border-bottom: 1px solid var(--border); } h3.el_current_category { margin-bottom: 10px; } a.el_post_link:last-child { border: none; } .el_category_list .row { padding: 30px 25px; border-radius: var(--br); border: 1px solid var(--border); float: left; width: 100%; background: var(--blur_elevated); } .el_post { overflow: hidden; padding: 1rem 0; transition: 300ms; display: flex; align-items: center; justify-content: space-between; background: var(--blur_elevated); border-radius: var(--br); } h4.el_post_title { margin: 0; } .el_category_list { float: left; width: 100%; } .certificate_container { padding: 2rem; background: var(--blur_elevated); border-radius: var(--br); border: 1px solid var(--border); } h2.certificate_title { margin-bottom: 5px; } p.certificate_paragraph { padding-block-end: 1rem; } .certificate_frame { padding-block: 1rem; } .success-animation { margin: 0 auto; } .checkmark { width: 100px; height: 100px; border-radius: 50%; display: block; stroke-width: 2; stroke: var(--clr-mandant); stroke-miterlimit: 10; box-shadow: inset 0px 0px 0px var(--clr-mandant); animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both; position: relative; top: 5px !important; right: 5px; margin: 0 auto; } .checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: var(--clr-mandant); fill: #fff; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; } .learning_success_modal { position: fixed; top: 50%; left: 50%; z-index: 2000; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.315); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; } .learning_success, .learning_error { background: var(--blur_elevated); padding: 2rem; border-radius: var(--br); border: 1px solid var(--border); z-index: 2001; position: relative; display: flex; flex-direction: column; gap: 2rem; max-width: 500px; text-align: center; justify-content: center; align-items: center; } .checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; } @keyframes stroke { 100% { stroke-dashoffset: 0; } } @keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } } @keyframes fill { 100% { box-shadow: inset 0px 0px 0px 30px #4bb71b; } } .demo1 { height: 300px; display: flex; justify-content: center; align-items: center; } .button_group { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } .ui-success, .ui-error { width: 100px; height: 100px; } .ui-success-circle { stroke-dasharray: 260.75219025px, 260.75219025px; stroke-dashoffset: 260.75219025px; transform: rotate(220deg); transform-origin: center center; stroke-linecap: round; animation: ani-success-circle 1s ease-in both; } .ui-success-path { stroke-dasharray: 60px 64px; stroke-dashoffset: 62px; stroke-linecap: round; animation: ani-success-path 0.4s 1s ease-in both; } a.profil_info_link { display: block; } .og_card_group { display: flex; gap: 7px; width: 100%; align-items: flex-start; padding-block-start: 1rem; } .level h3 { margin: 0; } .staff_header { font-size: small; font-weight: bold; } .person_cards.staff_cards { flex-direction: column; display: inline-flex; padding: 0; gap: 0px; } .card_description { max-width: 273px; text-overflow: ellipsis; overflow: hidden; text-align: left; width: 100%; font-size: 16px; font-weight: bold; } .og_card.department:before { content: ""; width: 1px; height: 30px; background: var(--border); position: absolute; left: 50%; transform: translateX(-50%); top: -30px; opacity: 0; } .einrichtung_container .og_card_group { flex-direction: column; } .og_card.department.einrichtung:before { display: none; } .collection_full.termine { padding: 15px; } .collection_full.termine .collection_content.termin_date { display: inline-block; margin-right: 15px; } .collection_full.termine .collection_content.termin_beschreibung { padding-block: 1rem; margin-top: 1rem; border-top: 1px solid var(--border); } .collection_full.termine h3.collection_content.termine__title.title.custom { font-size: 30px; } .collection_full.termine .collection_content.time { display: inline-block; margin-right: 15px; } .collection_full.termine .collection_content.ort { display: inline-block; } @keyframes ani-success-circle { to { stroke-dashoffset: 782.25657074px; } } @keyframes ani-success-path { 0% { stroke-dashoffset: 62px; } 65% { stroke-dashoffset: -5px; } 84% { stroke-dashoffset: 4px; } 100% { stroke-dashoffset: -2px; } } .ui-error-circle { stroke-dasharray: 260.75219025px, 260.75219025px; stroke-dashoffset: 260.75219025px; animation: ani-error-circle 1.2s linear; } .ui-error-line1 { stroke-dasharray: 54px 55px; stroke-dashoffset: 55px; stroke-linecap: round; animation: ani-error-line 0.15s 1.2s linear both; } .ui-error-line2 { stroke-dasharray: 54px 55px; stroke-dashoffset: 55px; stroke-linecap: round; animation: ani-error-line 0.2s 0.9s linear both; } @keyframes ani-error-line { to { stroke-dashoffset: 0; } } @keyframes ani-error-circle { 0% { stroke-dasharray: 0, 260.75219025px; stroke-dashoffset: 0; } 35% { stroke-dasharray: 120px, 120px; stroke-dashoffset: -120px; } 70% { stroke-dasharray: 0, 260.75219025px; stroke-dashoffset: -260.75219025px; } 100% { stroke-dasharray: 260.75219025px, 0; stroke-dashoffset: -260.75219025px; } } /* Learning Ende*/ /* Essensbestellung */ .meal_delivery_group { padding: 40px 30px; border-radius: var(--br); border: 1px solid var(--border); float: left; width: 100%; position: relative; margin-top: 80px; background: var(--blur_elevated); margin-bottom: 2rem; } div#food { scroll-margin: 200px; } .meal_delivery_group:before { content: ""; background-image: url(/userdata/images/meal_delivery_asset.svg); width: 160px; background-repeat: no-repeat; background-size: contain; display: block; height: 70px; position: absolute; top: -50px; left: 50%; transform: translateX(-50%); } tr.food_list_row td { padding: 7px; } .food_list table th { padding: 7px; position: sticky; top: 0; background: var(--blur_elevated); } .food_list { background: var(--blur_elevated); border-radius: var(--br); height: 300px; overflow-y: scroll; text-align: left; margin: 0 0 1rem; border: 1px solid var(--border); } tr.food_list_row:nth-child(even) td { background: var(--blur); } div#food .title_with_icon { cursor: pointer; } .food_list table { width: 100%; font-size: var(--fs-300); color: var(--fc-dark); border-collapse: collapse; } tr.food_list_row.current_day td { background: var(--clr-mandant); color: var(--fc-white-8); } input.button:disabled { filter: grayscale(1); cursor: not-allowed; } .payment_type { display: flex; align-items: center; gap: 10px; padding: 1rem 0; } .lieferungs_rezept a.button { background: var(--bg-light); color: var(--fc-dark); width: 100%; display: block; text-align: center; border: 1px solid var(--border); } p.response { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--blur_into_white); text-align: center; display: flex; justify-content: center; align-items: center; border-radius: var(--br); z-index: 1; } .lieferungs_content { display: flex; align-items: center; gap: 5px; } .lieferungs_rezept { padding-block-end: 1rem; } p.strong { color: var(--fc-dark); font-weight: bold; } .meal_delivery_group textarea { background: var(--bg-light); min-height: 115px; } img.icon_from_file { max-width: 40px; } .title_with_icon { display: flex; justify-content: space-between; padding-block-end: 1rem; } .location_today { padding-block-end: 1rem; } .lieferandude { padding-block-end: 1rem; display: flex; flex-direction: column; gap: 5px; } .receipt { font-family: "VT323"; } .payment { padding-block: 1rem; } .payment { position: relative; } #bezahlung { display: flex; align-items: center; gap: 0.5rem; } #toggle_switch { position: relative; width: 37px; height: 18px; background-color: #ccc; border-radius: 15px; transition: all 0.3s ease; display: inline-block; cursor: pointer; } label.active_label { font-weight: bold; color: var(--clr-mandant); } #toggle_switch.active { background-color: var(--clr-mandant); } #toggle_switch:before { content: ""; display: block; width: 14px; height: 14px; background-color: #fff; border-radius: 12px; position: absolute; top: 50%; left: 3px; transform: translateY(-50%); box-shadow: 0px 2px 5px rgb(0 0 0 / 20%); transition: all 0.3s ease; } #toggle_switch.active:before { left: 20px; } .toggle-container { display: flex; align-items: center; } #bezahlung label { display: inline-block; cursor: default; } #bezahlung input[type="radio"] { display: none; } #bezahlung input[type="radio"]:checked+.toggle-container #toggle:before { left: calc(100% - 27px); } #bezahlung input[type="radio"]:checked+.toggle-container #toggle { background-color: #3498db; } .receipt { max-width: 300px; background: #fff; margin: 0 auto; box-shadow: 5px 5px 19px #ccc; padding: 2rem 2rem; color: var(--fc-dark-8); } .receipt_headline { text-align: center; } .receipt_location { text-align: center; } .liefer_row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .stars { overflow: hidden; } .receipt h2 { color: var(--fc-dark-8); } .list_item { padding-block: 1rem; } p.liefer_name { font-weight: bold; } .barcode { font-family: "LibreBarcode128"; font-size: 43px; text-align: center; line-height: 1; padding-top: 1rem; } .id_number { text-align: center; } .receipt_print { display: flex; justify-content: center; padding-block-start: 1rem; } @media print { body { background-color: white !important; background-image: none !important; color: black !important; } .receipt_print { display: none !important; } } html, body { padding: 0; margin: 0; width: 100%; height: 100%; } .background-stuff { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #98c5e8; border-radius: var(--br); /* animation: wrapperIn 2s; */ } .background-stuff .bg { position: absolute; top: 0%; left: -100%; width: 50%; height: 100%; background: #636ed1; -webkit-animation: bgIn 4s 0s linear infinite; -moz-animation: bgIn 4s 0s linear infinite; -ms-animation: bgIn 4s 0s linear infinite; -o-animation: bgIn 4s 0s linear infinite; animation: bgIn 4s 0s linear infinite; -webkit-transform: skewX(10deg); -moz-transform: skewX(10deg); -ms-transform: skewX(10deg); -o-transform: skewX(10deg); transform: skewX(10deg); z-index: 1; } .background-stuff .bg-2 { background: #8faaff; -webkit-animation: bgIn 4s 1s linear infinite; -moz-animation: bgIn 4s 1s linear infinite; -ms-animation: bgIn 4s 1s linear infinite; -o-animation: bgIn 4s 1s linear infinite; animation: bgIn 4s 1s linear infinite; } .background-stuff .bg-3 { background: #5a73da; -webkit-animation: bgIn 4s 2s linear infinite; -moz-animation: bgIn 4s 2s linear infinite; -ms-animation: bgIn 4s 2s linear infinite; -o-animation: bgIn 4s 2s linear infinite; animation: bgIn 4s 2s linear infinite; } .background-stuff .ground { position: absolute; bottom: 0; margin-bottom: -1.875em; height: 77%; width: 100%; background: var(--bg-white); z-index: 2; } .container_card { height: 100%; width: 100%; display: table; overflow: hidden; } .container_car .car-wrapper { display: table-cell; vertical-align: middle; width: 100%; scale: 0.5; z-index: 2; position: relative; } .car { width: 20em; height: 12.5em; position: relative; opacity: 1; margin-left: auto; margin-right: auto; z-index: 4; -webkit-animation: carMove 0.3s infinite; -moz-animation: carMove 0.3s infinite; -ms-animation: carMove 0.3s infinite; -o-animation: carMove 0.3s infinite; animation: carMove 0.3s infinite; } .car .body { position: absolute; top: 0; left: 0.875em; width: 14.375em; height: 10em; background: #fff; } .car .body:before { content: ""; position: absolute; left: -0.875em; border-radius: 10px 10px 0 0; width: 15.875em; z-index: 2; height: 0.75em; background: #3190dd; } .car .body div { position: absolute; background: #fff; width: 18.125em; height: 3.75em; bottom: -0.625em; border-radius: 0 0 10px 10px; } .car .body div:before { content: ""; background: #fff; position: absolute; top: -1.8125em; right: 0px; width: 5em; height: 2.5em; z-index: 1; border-radius: 0 14px 0 0; -webkit-transform: rotate(17deg); -moz-transform: rotate(17deg); -ms-transform: rotate(17deg); -o-transform: rotate(17deg); transform: rotate(17deg); } .car .body div:after { content: ""; background: #fff; position: absolute; top: -5.125em; right: 1.0625em; width: 5.625em; height: 2.5em; z-index: 1; border-radius: 10px 0 0 0; -webkit-transform: rotate(75deg); -moz-transform: rotate(75deg); -ms-transform: rotate(75deg); -o-transform: rotate(75deg); transform: rotate(75deg); } .car .wheel { position: absolute; width: 3.75em; height: 3.75em; background: #3c464c; border-radius: 50%; bottom: 0; left: 3em; z-index: 14; -webkit-animation: carMove 0.3s 0.2s; -moz-animation: carMove 0.3s 0.2s; -ms-animation: carMove 0.3s 0.2s; -o-animation: carMove 0.3s 0.2s; animation: carMove 0.3s 0.2s; } .car .wheel:before { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; width: 1.5em; height: 1.5em; border-radius: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .car .wheel:nth-of-type(2) { left: 13.125em; } .car .decos { width: 18.125em; height: 10.5em; position: absolute; z-index: 12; top: 0; left: 0.875em; } .car .line-bot { position: absolute; bottom: 0.5625em; height: 3px; width: 100%; background: #e1e8ef; } .car .door { position: absolute; left: 7.5em; bottom: 0; width: 3.75em; height: 8.8125em; border-radius: 10px 10px 0 0; border: 3px solid #e1e8ef; border-bottom: 0; background: #fff; } .car .door:after { content: ""; position: absolute; top: 0.375em; left: 0.4375em; width: 2.875em; height: 2.5em; border-radius: 4px; background: #5bc2ef; } .car .door .handle { position: absolute; right: 0.625em; top: 4.375em; width: 0.625em; height: 0.625em; background: #e1e8ef; border-radius: 50%; } .car .door .handle:after { content: ""; width: 1.25em; height: 0.25em; border-radius: 10px; background: #e1e8ef; position: absolute; top: 50%; left: -0.3125em; margin-top: -0.125em; } .car .door .bottom { position: absolute; bottom: 0.375em; left: 0.6875em; width: 2.375em; height: 0.75em; } .car .door .bottom:before, .car .door .bottom:after { content: ""; display: block; width: 100%; height: 0.1875em; background: #e1e8ef; height: 0.25em; border-radius: 10px; margin-bottom: 0.25em; } .car .window { position: absolute; top: 1.125em; left: 12.5em; width: 2em; background: #5bc2ef; height: 4.5em; border-radius: 10px 10px 0 10px; } .car .window:before { content: ""; width: 100%; height: 1.25em; background: #5bc2ef; position: absolute; bottom: 0; left: 0; width: 2.9375em; border-radius: 0 10px 10px 10px; } .car .window:after { content: ""; height: 1.25em; background: #5bc2ef; position: absolute; top: 1.0625em; left: -0.8125em; width: 4.1875em; transform-origin: bottom; -webkit-transform: rotate(74deg); -moz-transform: rotate(74deg); -ms-transform: rotate(74deg); -o-transform: rotate(74deg); transform: rotate(74deg); border-radius: 10px 10px 10px 10px; } .car .light { position: absolute; width: 0.625em; height: 0.625em; background: #ff8c40; right: 3.75em; bottom: 3.125em; border-radius: 3px; } .car .light-front { position: absolute; width: 0.5em; height: 0.5em; background: #ff8c40; right: -0.1875em; bottom: 3.5625em; border-radius: 3px; } .car .light-front:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; background: #ff8c40; top: 100%; height: 0.9375em; border-radius: 3px; margin-top: 2px; } .car .antenna { position: absolute; width: 1.625em; height: 0.625em; background: #fff; bottom: 100%; left: 1.0625em; border-radius: 4px 4px 0 0; } .car .antenna:before { content: ""; position: absolute; width: 2.375em; height: 0.25em; background: #fff; bottom: 0; left: -1.375em; -webkit-transform: rotate(55deg); -moz-transform: rotate(55deg); -ms-transform: rotate(55deg); -o-transform: rotate(55deg); transform: rotate(55deg); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; border-radius: 4px; } .car .ice-cream { position: absolute; left: 1.875em; top: 1.875em; width: 4.375em; height: 4.375em; border: 3px solid rgba(246, 200, 102, 0.31); border-radius: 50%; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); } .car .ice-cream .cone { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -20%); -moz-transform: translate(-50%, -20%); -ms-transform: translate(-50%, -20%); -o-transform: translate(-50%, -20%); transform: translate(-50%, -20%); border-right: 1.125em solid transparent; border-left: 1.125em solid transparent; border-top: 2.5em solid #f4b224; opacity: 0; } .car .ice-cream .cone:after { content: ""; position: absolute; width: 1.25em; height: 1.25em; background: #00c0a8; border-radius: 50%; top: -3.4375em; left: 0px; z-index: -1; opacity: 0; } .ice-cream:after { content: ""; background-image: url(/userdata/images/stiften.svg); background-repeat: no-repeat; background-size: contain; width: 40px; height: 40px; z-index: 1; display: flex; justify-content: center; align-items: center; margin-left: 15px; margin-top: 12px; rotate: -66deg; } .car .ice-cream .cone:before { content: ""; position: absolute; width: 1.25em; height: 1.25em; background: #ffd132; border-radius: 50%; top: -3.4375em; left: -1.25em; z-index: -1; box-shadow: 10px -5px 0px 0px #ff9a9a; opacity: 0; } .wind { position: absolute; z-index: -1; right: 100%; height: 100%; margin-right: -1.25em; } .wind .p { position: absolute; background: #fff; border-radius: 0.625em; height: 0.625em; } .wind .p1 { width: 4.375em; position: absolute; right: 0; top: 1.5625em; animation: wind 1s -1s linear infinite; } .wind .p2 { width: 6.25em; right: 2.5em; top: 3.75em; animation: wind 1s -2s linear infinite; } .wind .p3 { width: 3.125em; right: 0em; top: 6.5625em; animation: wind 1s -1s linear infinite; } .wind .p4 { width: 3.75em; right: 6.25em; top: 8.4375em; animation: wind 1s 1s linear infinite; } .wind .p5 { width: 4.375em; right: 1.875em; top: 9.0625em; animation: wind 1s -1.5s linear infinite; } .car-wrapper_inner { position: relative; z-index: 4; } @keyframes carMove { 0% { transform: translateY(0px); } 50% { transform: translateY(-1px); } 100% { transform: translateY(0px); } } @keyframes wind { 0% { transform: translateX(100%); opacity: 1; } 100% { transform: translateX(-400%); opacity: 0; } } .car_outter { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); position: relative; animation: carDrive 5s 1s cubic-bezier(0.88, 0.08, 0.16, 1.1) infinite; } .response.container_car { width: calc(100% + 4rem); display: block; margin-left: -2rem; overflow: hidden; } div#countdown { border: 2px solid var(--clr-mandant); border-radius: 999px; width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; } .background-stuff h3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 1rem; } @keyframes carDrive { 0% { transform: translateX(-150%); } 25% { transform: translateX(0%); } 70% { transform: translateX(0%); } 100% { transform: translateX(300%); } } @keyframes bgIn { 0% { left: 100%; } 100% { left: -100%; } } @keyframes wrapperIn { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* Essensbestellung Ende */ /* History */ .historie div#hero_content { display: none !important; } .collection_list.history { width: 100%; padding: 0; } .collection_list.history.not_read .collection_container { outline: none; } .historie .filter_display { position: absolute; right: 2rem; top: 2rem; z-index: 2; } .historie .owl-item img { height: 100% !important; } .historie .owl-nav { gap: 14rem; } .owl-navigation { position: absolute; right: 0; top: 50%; transform: translateY(-50%); rotate: 90deg; } body.historie { overflow: hidden; } .historie .main-screen, .historie .container { padding: 0; max-width: 100%; } .historie .owl-nav span { font-size: 40px; color: var(--fc-white-8); } .collection_list.history .collection_container { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; min-height: 100vh; padding-right: 14rem; overflow: hidden; } .collection_content.history_img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; filter: brightness(0.4); } .collection_content.history_img img { animation: scale 40s linear infinite; overflow: hidden; object-fit: cover; } @keyframes scale { 50% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } } .collection_content.history_teaser, h3.collection_content.history__title.title.custom { max-width: 600px; text-align: right; margin-left: auto; color: var(--fc-white-8); } h3.collection_content.history__title.title.custom { font-size: calc(var(--fs-900) * 2); color: var(--fc-white-8); } h3.collection_content.history__title.title.custom:before { content: "Historie"; font-size: 19px; float: left; width: 100%; color: var(--clr-mandant); } /* History Ende */ /* Infoboard */ .warm .infoboard_boxes { padding-inline: 2rem; } .bg_white .row { background: var(--blur_elevated); border: 1px solid var(--border); border-radius: var(--br); } .warm .content_day { justify-content: flex-start; } .inhouse_and_outhouse { padding-block-end: 1rem; } .infoboard_category_4 span.category { background-color: green; padding: 5px; display: inline-block; border-radius: var(--br); color: var(--fc-white-8); } .infoboard_category_meeting { position: relative; border-bottom: 1px solid var(--border); padding-block: 10px; font-weight: var(--fw-bold); } .infoboard_category_meeting .infoboard_contact { border-radius: 0; padding: 0; background: none; font-weight: var(--fw-regular); font-size: var(--fs-500); color: var(--fc-primary); display: inline-block; } .home div#hero_content h1:after { content: ""; background: var(--clr-mandant); width: 20px; height: 50%; position: absolute; right: 34px; top: 0; } .infoboard_meeting:before { content: ""; background-image: url(/userdata/01_Basic/house-line.svg); background-repeat: no-repeat; width: 23px; height: 15px; display: inline-block; background-size: contain; } .infoboard_contact:nth-child(2):before { content: "mit"; padding-right: 4px; } .contact_info .infoboard_contact:nth-child(2):before { display: none; } /* .infoboard_meeting:after { content: '|'; padding-left: 7px; } */ .infoboard_category_meeting .infoboard_contact:after { content: "|"; padding-inline: 5px; } .infoboard_category_meeting .infoboard_contact:last-child:after { display: none; } .no_unterstrich_meetings { position: relative; border: none; color: var(--fc-dark); padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .inhouse, .outhouse, .inhouse_and_outhouse { width: 100%; float: left; } .infoboard_meeting:hover span.infoboard_contact_tooltip { display: block; } .textlink { float: left; width: 100%; } .betriebsrat .textlink { width: 100%; display: flex; padding-left: 35px; } .betriebsrat .textlink a { text-align: unset; padding: unset; display: unset; border-bottom: unset; padding-block-end: unset; color: var(--clr-mandant); text-decoration: underline; padding-left: -20px; } .textlink a { text-align: center; padding: 1rem; width: 100%; display: block; border-bottom: 1px solid var(--border); padding-block-end: 3rem; color: var(--clr-mandant); text-decoration: underline; } .anpassung_melden label { font-size: var(--fs-300); } .anpassung_melden .contactformular { padding-block-start: 0; } .infoboard_category_4 { background-color: green; color: var(--fc-white-8); } .inhouse span.infoboard_contact_tooltip, .outhouse span.infoboard_contact_tooltip { top: -65px; } .outhouse p { font-size: var(--fs-300); margin-bottom: 5px; } .inhouse p { font-size: var(--fs-300); margin-bottom: 5px; } .infoboard_meeting { display: inline-block; padding-right: 7px; border-radius: var(--br); position: relative; color: var(--fc-dark); font-weight: 400; } .dashboard .white_bg h3 { padding-left: 1rem; } span.infoboard_contact_tooltip { display: none; position: absolute; width: 200px; background: var(--bg-white); color: var(--fc-dark); padding: 1rem; text-align: center; border-radius: var(--br); border: 1px solid var(--border); left: 50%; transform: translateX(-50%); top: -100px; z-index: 999; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; } .infoboard_category_0 span.category { background-color: var(--clr-mandant); padding: 5px; display: inline-block; border-radius: var(--br); color: var(--fc-white-8); } .warm .infoboard_category_0 span.category { background-color: var(--clr-mandant); } .infoboard_category_1 span.category { background-color: #707070; padding: 5px; display: inline-block; border-radius: var(--br); color: var(--fc-white-8); } .infoboard_category_2 span.category { background-color: #edcc2b; padding: 5px; display: inline-block; border-radius: var(--br); color: var(--fc-white-8); } .infoboard_category_3 span.category { background-color: #4dc1c1; padding: 5px; display: inline-block; border-radius: var(--br); color: var(--fc-white-8); } .infoboard_category_birthday span.category { background-color: green; padding: 5px; display: inline-block; border-radius: var(--br); color: var(--fc-white-8); } .infoboard_category_0 { background-color: var(--clr-mandant); color: var(--fc-white-8); } .infoboard_category_1 { background-color: #707070; color: var(--fc-white-8); } .infoboard_category_2 { background-color: #edcc2b; color: var(--fc-white-8); } .infoboard_category_3 { background-color: #4dc1c1; color: var(--fc-white-8); } .infoboard_contact.infoboard_category_birthday { background-color: green; color: var(--fc-white-8); } .contact_info { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .infoboard_contact:hover span { display: flex; flex-direction: column; gap: 5px; } /* Infoboard Ende*/ /* Knowledgecenter */ a.kc_post_link { width: 100%; float: left; flex: 1 1 100%; } .kc_category_line_list { display: grid; grid-template-columns: repeat(4, 1fr); /* Vier Spalten für Desktop */ gap: 1rem; /* Abstand zwischen den Grid-Elementen */ } .kc_post svg { fill: var(--fc-dark); } .close svg { fill: var(--fc-dark); } .kc_category { background: var(--blur_elevated); border-radius: var(--br); overflow: hidden; height: 100%; transition: 300ms; border: 1px solid var(--border); } .collection_list.knowledgecenter-post a.button.bookmark { display: none; } .collection_list.knowledgecenter-post .collection_content.kc_teaser { display: none; } .collection_list.knowledgecenter-post .collection_content.kc_img { display: none; } .kc_article table { width: 100% !important; border: none; padding-block: 1rem; } .kc_article h2 { font-size: var(--fs-700); margin-block: 1rem; } .kc_article td { border: none; border-bottom: 1px solid var(--border); padding: 10px 0; } a.button.bookmark { background: var(--clr-mandant); padding: 13px; float: left; border-radius: var(--br); color: var(--fc-white-8); text-align: center; display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; } a.button.bookmark svg { fill: white; padding: 3px; } .kc_post { overflow: hidden; padding: 1rem 0; transition: 300ms; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } div#overlayPDF { position: fixed; z-index: 9999; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; background-color: rgba(0, 0, 0, 0.521); height: 100%; display: flex; justify-content: center; align-items: center; } /* .pdffiles { background: white; padding: 1rem; border-radius: var(--br); border: 1px solid var(--border); } */ .collection_list .collection_content.kc_files { display: none; } div#overlayContentPDF { width: 100%; display: flex; justify-content: center; align-items: center; } embed { height: 90vh; width: 100% !important; max-width: 1400px !important; } div#closeOverlay { position: fixed; right: 1rem; top: 1rem; background: white; padding: 8px 17px; border-radius: var(--br); cursor: pointer; } .kc_back_button { padding: 10px 0px 10px 10px; display: flex; justify-content: flex-start; width: 100%; } .knowledgecenter-post.full_preview button#backButton { display: block; } .collection_full h3.collection_content.knowledgecenter-post__title.title.custom { font-size: var(--fs-900); margin-bottom: 5px; padding: 0; background: none; border: none; } .kc_post_list_wrapper { width: 100%; float: left; background: var(--blur_elevated); padding: 1rem; border-radius: var(--br); border: 1px solid var(--border); } .collection_list.knowledgecenter-post .collection_container { overflow: hidden; padding: 1rem 0; transition: 300ms; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .full_preview .kc_post_list_wrapper { padding: 0; border: none; background: none; } .collection_list.knowledgecenter-post .collection_container:after { width: 5px; height: 5px; transition: 0.5s; transform: rotate(135deg); position: relative; cursor: pointer; background: transparent !important; border-top: 1px solid var(--fc-dark); border-left: 1px solid var(--fc-dark); content: ""; float: left; margin-right: 4px; } .kc_content_link svg { fill: var(--fc-dark); } .collection_list.knowledgecenter-post { width: 100%; padding: 0px 15px; } .kc_post:hover { background: var(--blur_nav_active); } .kc_post h4 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 95%; font-size: 15px; } .kc_category:hover { background-color: var(--bg-light); } p.kc_tags { padding-inline: 1rem; margin-top: 1rem; font-size: var(--fs-500); margin-bottom: 5px; } .collection_full button#backButton { margin: 1rem 0; font-size: 14px; font-weight: var(--fw-regular); display: block; padding: 0; } .collection_full button#backButton:before { top: 6px; } h3.kc_title { padding-inline: 1rem; margin-block-end: 1rem; } img.kc_img { height: auto !important; aspect-ratio: 4 / 3 !important; } .pct_read { display: flex; width: 100%; padding-inline: 1rem; flex-direction: column; position: relative; gap: 5px; } .pct_textcontent { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: var(--fs-400); } .pct_status { height: 10px; background: var(--clr-mandant); border-radius: 999px; z-index: 1; position: relative; } .pct_textcontent:after { content: ""; width: 100%; height: 10px; background: var(--blur); position: absolute; bottom: 0; border-radius: 999px; max-width: calc(100% - 2rem); left: 50%; transform: translateX(-50%); } .kc_content_card { border-radius: var(--br); background: var(--blur_elevated); padding-block-start: 1rem; border: 1px solid var(--border); } .collection_list h3.collection_content.knowledgecenter-post__title.title.custom { font-weight: var(--regular); font-size: var(--fs-500); } .kc_content { display: flex; align-items: center; gap: 0.5rem; padding-inline: 1rem; padding-bottom: 1rem; } .kontaktdaten_content { width: 100%; } .kc_content_link { border-top: 1px solid var(--border); display: flex; align-items: center; padding: 1rem; justify-content: space-between; } .kc_content_text h5 { margin: 0; } .kc_content_card .svg_content { width: 45px; height: 45px; } .kc_card_list { display: flex; flex-direction: column; gap: 1rem; } .collection_full.knowledgecenter-post .collection_content.kc_teaser { float: left; width: 100%; position: relative; margin-block-end: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); float: left; width: 100%; } .collection_full.knowledgecenter-post .collection_content.kc_article { float: left; width: 100%; position: relative; margin-block-end: 1rem; float: left; width: 100%; } h3.collection_content.knowledgecenter-post__title.title.custom:after { display: none; } .collection_content.kc_files { background: var(--clr-mandant); border-radius: var(--br); padding: 1rem; color: var(--fc-white-8); } @media (width < 1200px) { .collection_content.kc_files { margin-top: 20px; } } .collection_full.knowledgecenter-post .collection_content:last-child:after { display: none; } .collection_full.knowledgecenter-post .owl-item img { height: 550px !important; object-fit: contain; } .collection_content.kc_img img { border-radius: var(--br); margin-block-end: 1rem; } h3.kc_current_category { margin-bottom: 1rem; font-size: 22px; } .collection_content.kc_article a { color: blue; text-decoration: underline; } .collection_list.knowledgecenter-post .collection_container:hover { background: var(--blur_nav_active); } .collection_content.kc_files:before { content: "Downloads"; font-size: var(--fs-800); font-weight: bold; display: block; border-bottom: 1px solid white; padding-block-end: 5px; margin-bottom: 10px; } .kc_files .filegallery_content_file { border-bottom: 1px solid #ffffff63; padding-block: 10px; } .kc_files .filegallery_content_file:last-child { border-bottom: 0; padding-bottom: 0; } .collection_full.knowledgecenter-post .collection_container { width: 100%; float: left; padding: 0 15px; } .content_right { position: sticky; top: 60px; } .knowledgecenter-post .content_right { position: unset; /* top: 60px; */ } .filegallery_content_file:before { content: ""; background-image: url(/userdata/01_Basic/03_Icons/download.svg); background-repeat: no-repeat; background-size: contain; width: 15px; height: 15px; flex-shrink: 0; display: block; float: left; filter: invert(1); } .full_preview .filegallery_content_file:before { filter: unset; } .filegallery_content_file { display: flex; align-items: center; gap: 5px; padding-block: 5px; } .collection_content.kc_image img { border-radius: var(--br); overflow: hidden; } .collection_content.kc_video iframe { height: 520px; } .collection_content.kc_video { width: 100%; float: left; padding-block-end: 1rem; } .collection_content.kc_image { width: 100%; float: left; padding-block-end: 1rem; } .my_bookmarks { position: fixed; top: 0; right: 0; z-index: 99999; height: 100vh; background: var(--bg-white); padding: 2rem; box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px; max-width: 350px; display: none; width: 100%; } .close { padding-block-end: 1rem; cursor: pointer; } div#show_bookmarks { cursor: pointer; } a.remove_bookmark { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); } a.remove_bookmark { content: ""; background-image: url(/userdata/images/delete.svg); background-repeat: no-repeat; background-size: contain; width: 15px; height: 15px; } .bookmark_container { border: 1px solid var(--border); display: flex; align-items: center; padding: 1rem; padding-left: 4rem; border-radius: var(--br); margin-bottom: 1rem; position: relative; } .bookmark_content_svg svg { fill: var(--fc-white-8); } a.bookmark_content { font-weight: bold; max-width: 90%; } .my_bookmarks .headline { padding-bottom: 2rem; } button.show_all_posts { width: 100%; margin-top: 1rem; } .bookmark_content_svg { position: absolute; top: 0; background: var(--clr-mandant); height: 100%; width: 55px; left: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--br); border-top-right-radius: 0; border-bottom-right-radius: 0; border: 1px solid var(--clr-mandant); } /* .knowledgecenter-post a.button.bookmark { display: none; } */ /* .collection_full.knowledgecenter-post { max-width: 1370px; } */ .content_left { background: var(--bg-white); padding: 2rem; border-radius: var(--br); border: 1px solid var(--border); } .dashboard .mitarbeitervorstellung_wrapper .collection_list { padding: 0; width: 100%; } .dashboard .mitarbeitervorstellung_wrapper .collection_list .collection_container { padding: 0 !important; width: 100% !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; padding: 1rem !important; padding-left: 70px !important; border-radius: 0 !important; } .dashboard .mitarbeitervorstellung_wrapper .collection_list .collection_container:last-child { border-bottom: 0 !important; } .mitarbeitervorstellung_wrapper { margin-bottom: 1rem; float: left; width: 100%; border-bottom: 1px solid var(--border); } .dashboard .mitarbeitervorstellung_wrapper .collection_list.news .collection_content.vorschaubild img { width: 50px !important; height: 50px !important; border-radius: 999px !important; top: 50%; transform: translateY(-50%); left: 10px; position: absolute; } .mitarbeitervorstellung_wrapper .collection_content.date { display: none; } .dashboard .mitarbeitervorstellung_wrapper h3.collection_content.news__title.title.custom { font-size: var(--fs-500); } .full_preview .collection_content.teaser { display: none; } /* Knowledgecenter */ /* Kontaktdaten */ /* .kontaktdaten_list { background: var(--blur_elevated); border-radius: var(--br); overflow: hidden; position: relative; border: 1px solid var(--border); } */ .contact_list { background: var(--bg-white); border-radius: var(--br); border: 1px solid var(--border); width: 100%; overflow: scroll; } .department_list { background: var(--bg-white); border-radius: var(--br); border: 1px solid var(--border); } a.group_btn { border: 1px solid var(--border); padding: 10px; border-radius: var(--br); background: var(--blur_nav_active); } .all_mandant { display: flex; gap: 0.5rem; padding: 1rem 2rem; white-space: nowrap; overflow-y: scroll; display: none; } a.button_text { text-decoration: underline; color: var(--clr-mandant); } .contact_group.list_form .contact_card_list { width: 100%; } .contact_group.list_form .contact_card { padding: 10px; flex-direction: row; gap: 5px; min-height: unset; align-items: center; justify-content: space-between; border: none; border-bottom: 1px solid var(--border); border-radius: 0; } .list_form .contact_card_list { padding: 0; } .contact_group.list_form .contact_head { padding-block-end: 0; min-width: 300px; } .contact_phone { min-width: 250px; text-align: left; } .contact_mail { text-align: left; min-width: 300px; } .basic_info { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .contact_img.img_container img { object-position: top; } a.contact_link { background: var(--bg-light); padding: 6px 10px; display: inline-block; text-align: center; border-radius: var(--br); font-size: var(--fs-300); margin-top: 5px; border: 1px solid var(--border); } table.contact_table { text-align: left; border-collapse: collapse; width: 100%; } table.contact_table th { padding: 7px 15px; padding-top: 10px; border-bottom: 1px solid var(--border); } table.contact_table td { padding: 7px 15px; border-bottom: 1px solid var(--border); } a.contact_link_new:hover { color: var(--link-color); text-decoration: underline; } .department_container:last-child { border-bottom: 0; } .department_container.active a.department_title { color: var(--clr-mandant); } .termine_wrapper .collection_list.termine { width: 100%; } .department_container.active a.department_title:after { rotate: -90deg; top: 12px; } .department_container { padding: 1rem; border-bottom: 1px solid var(--border); } a.department_title { font-size: var(--fs-700); font-weight: var(--fw-bold); position: relative; width: 100%; display: block; } .no-padding { padding-inline: 0 !important; } .widget_header { padding: 15px; border-bottom: 1px solid var(--border); } a.department_title:after { width: 7px; height: 7px; transition: 0.5s; transform: rotate(225deg); position: absolute; cursor: pointer; background: transparent !important; border-top: 1px solid black; border-left: 1px solid black; content: ""; top: 5px; right: 0; } td.contact_img_new img { width: 30px !important; height: 30px !important; border-radius: 999px; } .contact_card { padding: 1rem; border: 1px solid var(--border); background: var(--blur_nav); border-radius: var(--br); display: flex; flex-direction: column; gap: 5px; min-height: 212px; align-items: flex-start; transition: 300ms; overflow: hidden; position: relative; } .contact_teams a { background-repeat: no-repeat; background-size: contain; background-image: url(/userdata/intranet/contact/teams_icon.svg); width: 20px; height: 20px; position: absolute; bottom: 1rem; right: 1rem; cursor: pointer; } .contact_group.list_form .contact_teams a { position: relative; bottom: unset; right: unset; display: block; } .contact_group.list_form .contact_card:last-child { border: none !important; } .contact_img.img_container { width: 50px; aspect-ratio: 1; border-radius: 999px; overflow: hidden; flex-shrink: 0; background: var(--bg-light); } .contact_head { display: flex; align-items: center; gap: 0.5rem; padding-block-end: 1rem; } .contact_city { display: none; } .contact_name { color: var(--fc-dark); font-weight: bold; } a.group_btn.active { background: var(--clr-mandant); color: var(--fc-white-8); border: 1px solid var(--clr-mandant); } .contact_tag { white-space: nowrap; overflow: hidden; max-width: 200px; text-overflow: ellipsis; } .contact_card_list { width: 25%; float: left; padding: 0.5rem; } /* Kontaktdaten Ende */ /* Krankmeldung */ .krankmeldung .form-group.form-check input { width: auto; } .krankmeldung input#button { width: auto; } .contactformular { width: 100%; float: left; padding: 2rem; } hr { border-color: var(--border); } input[type="date"]::-webkit-calendar-picker-indicator { filter: var(--fbi); } .krankmeldung .group_container { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); padding-block-end: 1rem; } .krankmeldung .group_container:last-child { border-bottom: none; } .krankmeldung p.role { font-size: var(--fs-300); } .krankmeldung .group_container img { max-width: 70px; border-radius: 999px; background-color: var(--bg-light); border: 1px solid var(--border); } .krankmeldung .firmen-informationen { display: flex; flex-direction: column; gap: 1rem; padding-block-start: 1rem; } .krankmeldung .group_container h5 { margin: 0; font-size: var(--fs-800); } .form-group.form-check input { width: auto; } /* Krankmeldung Ende */ /* Login */ .login_content { display: flex; align-items: center; height: 100vh; justify-content: space-between; } div#logo-area { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; flex: 1 1 35%; flex-direction: column; padding: 5rem; position: relative; max-width: 750px; } a.forgot_password { opacity: 0.7; } a.forgot_password:hover { opacity: 1; } input#login-button:hover { transform: translateY(-1px); } .component.login_hintergrund { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-image: url('/module/intranet/login_pic/Hamburg.jpg'); } div#login-area { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; flex: 1 1 55%; background: var(--blur_elevated); backdrop-filter: var(--blur_settings); -webkit-backdrop-filter: var(--blur_settings); } .component.login_hintergrund .owl-item a { padding: 0 !important; } .component.login_hintergrund .owl-carousel.owl-loaded { height: 100% !important; } .component.login_hintergrund .owl-stage-outer { height: 100% !important; } .component.login_hintergrund .owl-carousel .owl-stage { height: 100% !important; } .component.login_hintergrund .owl-item img { height: 100vh !important; max-height: 100% !important; } .component.login_hintergrund .owl-dots { bottom: 30px; } div#logo-area .component.logo img { max-width: 230px; filter: brightness(19) invert(1); opacity: 0; } .quote-box { text-align: center; color: var(--fc-white-8); padding-block: 5rem; display: flex; flex-direction: column; gap: 1rem; position: absolute; bottom: 0; z-index: 1; } button#refresh { display: none; } .component.icon_logo_login img { filter: var(--fbi); max-width: 149px; } .component.icon_logo_login { margin-block-end: 2rem; } div#login_form { max-width: 380px; } div#quote { font-weight: bold; font-size: var(--fs-700); } p.author { font-size: var(--fs-500); } .login_button input.button { width: auto; padding: 10px 30px; } form#form_admin_login { display: flex; flex-direction: column; gap: 5rem; padding-block: 2rem; } input.button { cursor: pointer; border-radius: 7px; background: #dc1711; color: var(--fc-white-8); } #login_form input { border: 1px solid #dbdbdb; border-radius: 7px; } input#login-button { border: none; } .meal_delivery input.button { background: var(--clr-mandant); } .wrapper-login .mail { margin-bottom: 15px; } .login_button { display: flex; justify-content: space-between; align-items: center; } div#button-area .component.externe_login_links { position: absolute; bottom: 20px; display: flex; gap: 1rem; right: 20px; } div#button-area .component.externe_login_links a { opacity: 0.5; font-size: var(--fs-300); } div#button-area .component.externe_login_links a:hover { opacity: 1; } /* Login Ende */ /* Navigation */ nav { float: left; width: 250px; height: 100%; position: fixed; left: 0; top: 0; background: var(--blur_nav); border-right: 1px solid var(--border); } #header ul.level_1 { margin: 0 !important; padding: 0 !important; display: flex; gap: 0rem; flex-direction: column; } #toggle_navigation, .hamburger-menu { display: none; } div#toggle_navigation { float: right; width: auto; padding: 0 !important; height: auto; background: transparent; } div#log_out { position: absolute; left: 30px; bottom: 30px; display: flex; align-items: center; gap: 0.5rem; line-height: 1; opacity: 0.5; } div#log_out:hover { opacity: 1; } div#log_out svg { width: 15px; height: 15px; } div#log_out_mobile svg { width: 15px; height: 15px; fill: var(--fc-primary); } div#log_out_mobile { position: relative; display: flex; align-items: center; gap: 1rem; padding: 13px; } .mobile_submenu { padding: 10px 0 0; } .mobile_submenu .component.mein-konto { flex-wrap: wrap; padding-inline: 11px; } .mobile_submenu .component.mein-konto .textcontent { display: flex; align-items: center; gap: 1rem; line-height: 1; padding: 13px; background-color: var(--bg-light); border-radius: var(--br); } div#log_out_mobile svg { width: 15px; height: 15px; } .component_logo { padding: 25px; } div#header_2 { padding: 1rem; } div#horizontal_nav_bar { position: absolute; top: 0; right: 0; height: 50px; display: flex; align-items: center; justify-content: end; padding-inline: 1rem; width: calc(100% - 250px); z-index: 1; } div#log_out svg { fill: var(--fc-primary); } .component.mein-konto { display: flex; align-items: center; gap: 1rem; position: relative; font-size: var(--fs-400); padding-inline: 1rem; } li.level_1 a { display: flex; align-items: center; gap: 1rem; line-height: 1; padding: 13px 10px; border-radius: var(--br); color: var(--fc-dark); } li.level_1 a.active_tree { color: var(--fc-dark); background: var(--blur_nav_active); } li.level_1 a.active_tree svg { fill: var(--fc-dark); } li.level_1 a:hover { background-color: var(--blur_nav_active); opacity: 1; color: var(--fc-dark); } li.level_1 svg { flex-shrink: 0; width: 15px; height: 15px; fill: var(--fc-dark); } .hamburger-menu { background: var(--bg-white); position: absolute; width: 100%; top: 100%; left: 0; display: none; padding: 10px; height: 100vh; } #header .hamburger-menu li.level_2 { padding: 20px 0px; color: var(--clr-white); } #header .hamburger-menu li.level_1 { list-style-type: none; } #toggle_navigation label.hamburg { display: block; background: transparent; width: 55px; height: 50px; position: relative; margin-left: auto; margin-right: auto; border-radius: 4px; margin: 0; cursor: pointer; } .line { position: absolute; left: 10px; height: 4px; width: 35px; background: var(--clr-mandant); border-radius: 2px; display: block; transition: 0.5s; transform-origin: center; } .line:nth-child(1) { top: 12px; } .line:nth-child(2) { top: 24px; } .line:nth-child(3) { top: 36px; } div#toggle_navigation.active>.hamburg .line:nth-child(1) { transform: translateY(12px) rotate(-45deg); } div#toggle_navigation.active>.hamburg .line:nth-child(2) { opacity: 0; } div#toggle_navigation.active>.hamburg .line:nth-child(3) { transform: translateY(-12px) rotate(45deg); } nav.nav_collapsed { width: 60px; white-space: nowrap; } nav.nav_collapsed li.level_1 a { padding: 13px 19px; } nav.nav_collapsed li.level_1 a, nav.nav_collapsed div#log_out { gap: 2rem; } nav.nav_collapsed .component_logo { padding: 20px 5px; } nav.nav_collapsed div#header_2 { padding: 2rem 0; } nav.nav_collapsed div#header_1 img { padding: 0px; } nav.nav_collapsed div#log_out { left: 23px; } main.main_collapsed, .horizontal_nav_bar.bar_collapsed { width: calc(100% - 60px) !important; } .hidden_toggle { display: inline-block; padding: 5px; position: absolute; top: 0; left: 0; cursor: pointer; font-size: var(--fs-300); opacity: 0.5; } .hidden_toggle.toggle_collapsed { transform: rotate(180deg); } @media (min-width: 1500px) { main.main_collapsed .container { max-width: 1720px; } } /* Navigation Ende */ /* News */ .collection_list.news.ankuendigungen { width: 100%; } .dashboard .collection_list.news .collection_container, .betriebsrat .collection_list.news .collection_container { border-radius: var(--br); background-color: var(--bg-white); border: 1px solid var(--border); overflow: hidden; height: 100%; display: flex; flex-direction: column; /* padding-top: 235px; */ /* align-items: flex-start; */ justify-content: flex-start; } .collection_content_full .collection_content.news_subtitle { font-size: 26px; font-weight: 600; padding-bottom: 1rem !important; } .collection_content.news_content_right { grid-area: right; padding: 15px; } .collection_content.news_content_left { grid-area: left; position: sticky; top: 40px; } .collection_full.news .collection_container { gap: 4rem; display: grid; grid-template-areas: "left right"; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); padding: 30px 15px; align-items: start; } .dashboard .collection_list.news .collection_content.vorschaubild img { /* .betriebsrat .collection_list.news .collection_content.vorschaubild img { */ width: 100% !important; height: auto !important; object-fit: cover; z-index: -1; /* position: absolute; */ top: 0; left: 0; aspect-ratio: 4 / 3 !important; } .betriebsrat .collection_list.news .collection_content.vorschaubild img { /* max-width: 290px; */ width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; } .betriebsrat .collection_list.news .collection_content.vorschaubild img { /* .betriebsrat .collection_list.news .collection_content.vorschaubild img { */ width: 100% !important; height: auto !important; object-fit: cover; z-index: -1; position: absolute; top: 0; left: 0; aspect-ratio: 4 / 3 !important; } .betriebsrat .collection_list.news .collection_content.vorschaubild.no-cover img { /* .betriebsrat .collection_list.news .collection_content.vorschaubild img { */ object-fit: unset; } .collection_list .collection_container .news_link { position: absolute; top: 2rem; right: 2rem; } .dashboard .collection_content.date, .betriebsrat .collection_content.date { background: var(--clr-mandant); color: var(--fc-white-8); padding: 5px 12px; margin-block-end: 1rem; font-size: var(--fs-500); } a.button.create_collection { background: var(--clr-mandant); padding: 9px 16px; border-radius: var(--br); color: var(--fc-white-8); } .create_collection_wrapper { width: 100%; float: left; display: flex; justify-content: flex-end; position: fixed; bottom: 4rem; right: 1rem; z-index: 1; display: none; } span.hint.hide { display: none; } .news_title h2 { position: absolute; top: 1.5rem; color: var(--fc-white-8); } /* .news_link { position: absolute; top: 30px; right: 1.5rem; z-index: 5; } */ div#filter-element { display: none; } .dashboard .collection_list.news.show { padding: 0; } .visitenkarte_kopf { display: flex; justify-content: space-between; align-items: flex-start; } .visitenkarte_text p { margin-top: 7px; } .visitenkarte img.profil_img_nav_bar { width: 55px !important; height: 55px !important; } .visitenkarten_links { display: flex; gap: 1rem; align-items: center; } .visitenkarten_betriebsrat .owl-nav { gap: 3rem; } .visitenkarte_kopf .mandant_logo img { max-width: 102px; height: 100% !important; aspect-ratio: auto !important; max-width: 150px !important; } .visitenkarte .component_logo { padding: 0; } .visitenkarte_fuß { display: flex; justify-content: space-between; align-items: flex-end; } .visitenkarte_text h3 { background: var(--clr-mandant); display: inline; color: var(--fc-white-8); padding: 5px 10px; } .visitenkarte { padding: 2rem; border: 1px solid var(--border); border-radius: calc(var(--br) + 5px); height: 230px; display: flex; flex-direction: column; justify-content: space-between; } .betriebsrat .collection_list.news { padding: 0; } .dashboard .collection_list.news:nth-child(1) .collection_container .collection_content.teaser, .betriebsrat .collection_list.news:nth-child(1) .collection_container .collection_content.teaser { display: -webkit-box !important; } .dashboard .collection_content.teaser, .betriebsrat .collection_content.teaser { -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; display: none; } .dashboard h3.collection_content.news__title.title.custom, .betriebsrat h3.collection_content.news__title.title.custom { -webkit-line-clamp: 4; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; padding-inline: 0; min-height: 54px; } /* DD 30.09.24 */ body.dashboard { div#area-2 { .news_dashboard>div:nth-child(3) { .collection_container { display: flex; flex-direction: row; } } .collection_list.news { .news__underwrapper { display: flex; flex-direction: column; padding: 20px; .collection_content.date { width: fit-content; } } } } } body.betriebsrat { div#area-2 { .news_dashboard>div:nth-child(1) { /* display: none; */ max-height: 290px; .collection_container { display: flex; flex-direction: row; padding-left: 2rem; } .vorschaubild { max-width: 320px; } } .news_dashboard { .vorschaubild { img { position: static; } } } .collection_list.news { .news__underwrapper { display: flex; flex-direction: column; padding: 20px; .collection_content.date { width: fit-content; } } } .person_card_container { opacity: 0; } } } .news_dashboard { display: flex; flex-wrap: wrap; gap: 15px; width: 100%; margin: 0 0 1rem; justify-content: space-between; } /* Stile für das dritte Kind-Element */ .dashboard .news_dashboard>div:nth-child(3) { flex: 0 0 100%; /* Das dritte Element nimmt die gesamte Breite ein */ } /* Stile für das dritte Kind-Element */ .betriebsrat .news_dashboard>div:nth-child(1) { flex: 0 0 100%; /* Das dritte Element nimmt die gesamte Breite ein */ } /* Spezifische Stile für das Collection-Container des dritten Elements */ .dashboard .news_dashboard>div:nth-child(3) .collection_container { height: auto !important; /* padding-left: 47% !important; */ /* padding-top: 2rem !important; */ min-height: 250px; } /* Spezifische Stile für das Collection-Container des dritten Elements */ .betriebsrat .news_dashboard>div:nth-child(1) .collection_container { height: auto !important; /* padding-left: 53% !important; */ padding-top: 2rem; min-height: 260px; } .dashboard .news_dashboard>div:nth-child(3) .collection_container .teaser { display: -webkit-box !important; -webkit-line-clamp: 4; } .betriebsrat .news_dashboard>div:nth-child(1) .collection_container .teaser { display: block !important; } /* Stile für Bilder innerhalb des dritten Elements */ .dashboard .news_dashboard>div:nth-child(3) .collection_content.vorschaubild img { width: auto !important; /* height: 100% !important; */ } .dashboard .news_dashboard>div:nth-child(3) h3.collection_content.news__title.title.custom { min-height: unset; } /* Stile für Bilder innerhalb des dritten Elements */ /* .betriebsrat .news_dashboard>div:nth-child(3) .collection_content.vorschaubild img { width: 50% !important; height: 100% ! Important; } */ .dashboard .news_dashboard> :not(:first-child) { flex: 0 0 calc(33% - 15px); } .betriebsrat .news_dashboard> :not(:first-child) { flex: 0 0 calc(33% - 15px); } .person_card_container { padding: 2rem; width: 100%; float: left; border-bottom: 1px solid var(--border); } /* .dashboard h3.collection_content.news__title.title.custom:after, .betriebsrat h3.collection_content.news__title.title.custom:after { content: "———"; float: left; width: 100%; color: var(--clr-mandant); letter-spacing: -2px; } */ .collection_content.vorschaubild.panorama { display: none; } .collection_content.about_person:before { content: "Personen in diesem Artikel"; display: block; font-weight: bold; font-size: 14px; } .person_links { display: flex; gap: 5px; flex-wrap: wrap; } .news .collection_full .collection_content a { color: var(--link-color); text-decoration: underline; } .collection_content.author_about { display: flex; justify-content: space-between; } .collection_content.author_about .collection_content { margin: unset !important; } .news .collection_list.news .collection_container { background: var(--blur_elevated); border-radius: var(--br); overflow: hidden; transition: 300ms; height: 100%; } .news .collection_list.news .collection_container:hover .collection_content.teaser { color: var(--fc-dark); } a.button_filter.o-filter:hover { background: var(--border); color: var(--fc-dark); } .news .collection_list.news .collection_content.date { padding-inline: 1rem; padding-block-start: 1rem; font-size: var(--fs-500); padding-block-end: 5px; opacity: 1; background: var(--clr-mandant); display: inline-block; color: var(--fc-white-8); padding: 5px 10px; margin-inline: 1rem; margin-top: 1rem; margin-bottom: 7px; } .collection_list.news .collection_container:after { content: ""; background-image: url(/userdata/images/bx-link-external.svg); position: absolute; bottom: 1rem; right: 1rem; width: 15px; height: 15px; background-repeat: no-repeat; background-size: contain; } .news .collection_list.news .collection_container h3.collection_content.news__title.title.custom { padding-inline: 1rem; -webkit-line-clamp: 2; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box; } .news .collection_list.news .collection_container .collection_content.teaser { padding-inline: 1rem; margin-bottom: 2rem; -webkit-line-clamp: 4; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; padding-block-start: 1rem; } .news .collection_list.news .collection_container .collection_content.vorschaubild img { /* border-bottom: 5px solid var(--clr-mandant); */ aspect-ratio: 4 / 3 !important; } .collection_full.news .collection_content.vorschaubild img { height: auto !important; border-radius: var(--br); } /* .news.full_preview div#hero_content { display: none!important; } */ .collection_full.news .collection_content.artikeltext { padding-block: 1rem; border-top: 1px solid var(--border); color: var(--fc-dark); margin-top: 1rem; } .collection_content_full { padding: 5rem; padding-top: 1rem; } .collection_content_full .collection_content { background: none !important; padding: 0 !important; } .highlight_news { position: relative; width: 100%; float: left; margin-block-end: 2rem; } .full_preview main { background: var(--blur_into_white); } .knowledgecenter-post.full_preview main { background: var(--bg-light); } .collection_full.news .collection_content.bilduntertitel { font-size: var(--fs-300); padding-block: 5px !important; } .collection_full.news .title.custom { font-size: var(--fs-900); padding-bottom: 10px !important; line-height: 1.2; } .contact_group.list_form { padding: 0; } .collection_full.news button#backButton { margin-top: 0; } .collection_full.news .articel_details .collection_content { margin: unset !important; } .search_group .textcontent { display: flex; align-items: baseline; flex-direction: column; } .collection_full.news .articel_details { max-width: 800px; margin: 0 auto; display: flex; align-items: flex-start; gap: 0rem; flex-direction: column; padding: 0; } .collection_full.news .date_time { display: flex; align-items: center; gap: 1rem; opacity: 0.5; flex-direction: row-reverse; } .collection_content.author:before { content: "verfasst von "; display: block; font-weight: bold; font-size: 14px; } .collection_full.news .collection_content.date { font-size: 15px; font-weight: normal; padding-block-end: 1rem !important; opacity: 0.5; background: transparent; color: inherit; padding: 0; } li.not_promoted { background: var(--bg-light); padding: 5px 10px; border-radius: var(--br); border: 1px solid var(--border); } .input_note { font-size: var(--fs-300); color: var(--clr-mandant); padding: 5px 0; } .collection_content.youtube_video:empty { display: none; } .youtube_input { width: 100%; } .infobox { padding: 6px 15px; background: var(--bg-light); display: inline-block; border-radius: var(--br); border: 1px solid orange; background: orange; color: var(--fc-white-8); } ul.toolbar_menu { display: flex; align-items: center; gap: 1rem; padding: 0; } .collection_field table { width: 100%; } .youtube_input .label, .youtube_input .input { width: 100%; } .collectionform { float: left; max-width: 800px; width: 100%; } form#form_collection_cardform { max-width: 800px; float: left; width: 100%; } .input_note { font-size: var(--fs-300); color: var(--clr-mandant); } table.cardform { width: 100%; } .collection_field.current { width: 100%; float: left; } div#overlaycrumb { max-width: 800px; } div#overlaycrumb:before { content: "Beitrag erstellen"; font-size: var(--fs-700); font-weight: bold; } .collection_field.current, .collection_field.current.youtube_video { display: none; } .collection_field.current { width: 100%; float: left; padding: 0.5rem 0; } div#overlayContent { position: fixed; z-index: 9999; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; background-color: rgba(0, 0, 0, 0.521); height: 100%; } div#content-collection { position: fixed; z-index: 9999; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 1400px; height: calc(100vh - 100px); overflow-y: scroll; border-radius: var(--br); } .collection-main-wrapper { background: var(--bg-white); width: 100%; float: left; padding: 2rem; max-width: 800px; border-radius: var(--br); border: 1px solid var(--border); } li.promoted { list-style: none; float: right; padding-block-end: 1rem; } input#input_description { font-size: var(--fs-900); } .news .collection_content a { color: var(--clr-mandant); } .link_url_group { width: 50%; float: left; padding-right: 1rem; } .link_text_group { width: 50%; float: left; } .collection_full.news.ankuendigungen .collection_container { padding-top: 0; } .full_preview .ankuendigungen .collection_content.teaser { display: block; padding-block-end: 5px; } .date-group { width: 100%; float: left; padding-bottom: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; } .termine_wrapper .collection_content.termin_date { display: none; } .termine_wrapper .collection_list.termine .collection_container { border-left: 3px solid var(--clr-mandant); padding-left: 10px; } .termine_wrapper .collection_content.time:before { content: "Wann: "; } .termine_wrapper .collection_content.ort:before { content: "Wo: "; } .date_title { padding-inline: 10px; font-size: 15px; } .collection_full.news .collection_content.gallery { padding-block-end: 2rem !important; width: 100%; display: flex; padding-block-start: 2rem; } .collection_content.youtube_video { display: flex; padding-block-end: 2rem !important; } .playground { display: flex; gap: 1rem; flex-wrap: wrap; } a.game_card { flex: 1 1 14%; height: 530px; max-width: 20%; box-shadow: 0 8px 10px -2px rgba(0, 0, 0, 0.5); position: relative; z-index: 1; transition: all 300ms; overflow: hidden; } .dashboard .collection_list .collection_container.Highlight.des.Monats { height: 500px; width: 100%; padding-bottom: 5rem; } .dashboard .collection_list .collection_container.Highlight.des.Monats .collection_content.teaser { display: -webkit-box !important; } .dashboard h3.termine_title { padding-left: 0; margin-bottom: 0; } .dashboard .collection_list .collection_container.Highlight.des.Monats:before { content: "mehr lesen"; background: var(--clr-mandant); border-radius: calc(var(--br) - 4px); padding: 2px 6px; position: absolute; bottom: 2rem; left: 2rem; } a.game_card:hover { transform: perspective(222px) translate3d(0px, 0px, 8px) rotateX(3deg); } a.game_card::before { width: 100%; height: 172%; position: absolute; top: 0; left: 0; content: ""; background-image: linear-gradient(35deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 51.5%, rgba(255, 255, 255, 0.15) 54%, rgba(255, 255, 255, 0.15) 100%); transform: translateY(-36%); opacity: 0.3; transition: all ease 0.28s 0.01s; } a.game_card:hover::before, a.game_card:focus::before { opacity: 0.7; transform: translateY(-20%); } .playground main { left: 250px; } .wordle_wrapper { position: relative; width: 100%; float: left; } #overlayContenting .collection-wrapper { width: 100%; float: left; } #overlayContenting .label.input_tags, #overlayContenting .label.input_validity_from, #overlayContenting .input.input_validity_from, #overlayContenting form#form_line_gallery_list_8, #overlayContenting form#form_field_youtube_list11, #overlayContenting .collection_field.currentgallery, #overlayContenting .collection_field.currentyoutube_video, #overlayContenting .label.input_validity_to, #overlayContenting .input.input_validity_to, #overlayContenting .input.input_tags { display: none; } #overlayContenting .input.input_collection_link_target_14 { float: left; width: auto; margin: 0; padding: 0; } /* News Ende */ /* Ankündigungen */ div#content .container { position: relative; } .ankuendigungen_dashboard { position: absolute; top: -90px; right: 30px; max-width: 500px; -webkit-animation-name: shake; -webkit-animation-duration: 0.8s; -webkit-animation-delay: 1s; -webkit-animation-timing-function: linear; -webkit-transform-origin: 50% 100%; width: 100%; } .collection_list.news.ankuendigungen:nth-child(1) .collection_container:before { content: "mehr lesen"; display: none; } .collection_list.news.ankuendigungen .collection_container:after { content: ""; display: none; } .collection_list.news.ankuendigungen { height: auto; padding: 1rem; } .workspace_table table { width: 100%; border-collapse: collapse; } .workspace_table td { padding: 10px 0; border-bottom: 1px solid var(--border); text-align: center; } .workspace_table td:first-child { text-align: left; } .workspace_table th:first-child { text-align: left; } .kc_custom_feed_table th { font-weight: var(--fw-regular); font-size: var(--fs-500); position: sticky; background: var(--bg-white); top: 0; } th.state { text-align: right; } td.ungelesen span { background: orange; color: var(--fc-white-8); padding: 3px 12px; border-radius: var(--br); font-size: var(--fs-500); text-align: right; } .kc_custom_feed_table { height: 310px; overflow-y: scroll; } td.gelesen, td.ungelesen { text-align: right; } td.gelesen span { background: #38d14c; color: var(--fc-white-8); padding: 3px 12px; border-radius: var(--br); font-size: var(--fs-500); text-align: right; } .workspace_table th { font-weight: normal; opacity: 0.8; color: var(--fc-dark); } .kc_custom_feed_table table { width: 100%; border-collapse: collapse; text-align: left; color: var(--fc-dark); } .kc_custom_feed_table td:first-child { font-weight: var(--fw-bold); } .kc_custom_feed_table td { padding: 10px 0; border-bottom: 1px solid var(--border); max-width: 300px; } .headline_with_subtitle>* { margin: 0; } .kc_custom_feed { width: 100%; float: left; background: var(--bg-white); padding: 1.5rem; border-radius: var(--br); border: 1px solid var(--border); } .workspace_table a { color: var(--fc-dark); text-decoration: underline; } @media (min-width: 1500px) { .ankuendigungen.full_preview .container { max-width: 100%; } .ankuendigungen.full_preview .main-screen { padding-top: 0; } } .collection_list.news.ankuendigungen .collection_container { background: var(--clr-mandant); padding: 2rem; height: auto; background-image: url(/userdata/01_Basic/03_Icons/ank_img.png); background-repeat: no-repeat; background-position: 100% 27px; background-size: 30%; padding-right: 144px; position: relative; min-height: 130px; border-radius: var(--br); width: 100%; border: none; } .betriebsrat .filter_display { display: none; } .collection_list.news.ankuendigungen h3.collection_content.news.ankuendigungen__title.title.custom { -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; color: var(--fc-white-8); flex-shrink: 0; width: 100%; padding-inline: 0 !important; } .collection_full.news.ankuendigungen .collection_content.reading_time { display: none; } .collection_list.news.ankuendigungen:nth-child(1) .collection_container { padding-bottom: 2rem; } .collection_list.news.ankuendigungen .collection_content.date { font-size: var(--fs-400); opacity: 0.7; display: block; color: var(--fc-white-8); margin: 0 0 7px; padding: 0; } @-webkit-keyframes shake { 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-2deg); } 20% { -webkit-transform: translate(-3px, 0px) rotate(3deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-2deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(4deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } } /* Ankündigungen Ende*/ /* Plattform */ .collection_content.plattform_text { display: none; } .filter_display { width: 100%; float: left; display: flex; gap: 0.5rem; padding: 0 15px; flex-wrap: wrap; padding-block-end: 10px; } .widget_header a { color: var(--link-color); text-decoration: underline; } .dashboard .filter_display { padding: 0 5px; } .dashboard .plattformen_wrapper { padding: 2rem; border-radius: var(--br); border: 1px solid var(--border); background: var(--blur_elevated); width: 100%; float: left; } .dashboard .collection_content.plattform_teaser { display: none; } .dashboard .collection_list.plattformen .collection_container { padding: 0.7rem; } .dashboard .collection_content.plattform_text_group h3 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-500); font-weight: var(--fw-regular); padding-inline: 0 !important; } .dashboard .collection_list.plattformen { padding: 0; width: 100%; } .dashboard .filter_display { display: none; } .dashboard .collection_content.plattform_img img { width: 60px !important; height: 60px !important; object-fit: contain; } .plattformen_dashboard { display: flex; padding: 0 1rem; margin-bottom: 1rem; gap: 0px; flex-wrap: wrap; } a.button_filter.a-filter { color: var(--fc-white-8); } .collection_content.plattform_img { padding: 1rem; flex-shrink: 0; } .collection_list.plattformen .collection_container { outline: none; background: var(--blur_elevated); padding: 2rem; border-radius: 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-direction: row-reverse; padding: 0 !important; } .collection_content.plattform_img img { width: 50px !important; height: 50px !important; } .collection_content.plattform_start, .collection_content.plattform_start a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; cursor: pointer; } /* Plattform Ende */ /* Profil */ .profil_header { background: var(--blur_elevated); border-radius: var(--br); overflow: hidden; position: relative; padding: 2rem; padding-block-start: 110px; border: 1px solid var(--border); } .profil div#hero_content { display: none !important; } .gift_list { display: flex; align-items: center; width: 100%; gap: 1rem; flex-wrap: wrap; } .gift_container { flex: 1 1 25%; } .gift_container input { float: left; width: auto; margin-left: 0; margin-top: 4px; margin-right: 5px; } .profil .gift_container label { font-size: var(--fs-500); } .form_group .gift_container img { margin: 0; margin-bottom: 5px; } img.restaurant_img { display: none; } p.restaurant_name { font-weight: bold; } .dashboard .profil_banner.certificate { display: flex; flex-direction: column; gap: 1rem; width: 100%; padding: 2rem; border-radius: 0; border: none; border-bottom: 1px solid var(--border); } p.amount:after { content: "x"; } .profil .profil_banner { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; width: 100%; } .dashboard a.button.create_collection { display: none; } .restaurant_list { padding-block-start: 1.2rem; display: flex; flex-direction: column; gap: 1rem; } img.restaurant_img { width: 44px !important; aspect-ratio: 1; border-radius: 999px; } .restaurant_place_img p { flex-shrink: 0; } .restaurant_place_img { display: flex; align-items: center; gap: 1rem; } .restaurant_content { display: flex; align-items: center; justify-content: space-between; } .learning_profil_header { width: 100%; float: left; margin-block-end: 1rem; margin-block-start: 60px; } h3.profil_certificate_title { margin-block-end: 1rem; margin-top: 5px; } img.profil_bg { position: absolute; top: 0; left: 0; width: 100%; height: 170px !important; object-position: center; z-index: 0; } img.profil_img { position: relative; width: 120px !important; height: 120px !important; border-radius: 999px; z-index: 0; border: 3px solid var(--bg-white); margin-block-end: 1rem; background-color: var(--bg-light); } p.profil_birthday:empty { display: none; } .profil_header { width: 100%; float: left; margin-block-end: 1rem; } .pct_status_label { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-300); opacity: 0.7; padding-block-start: 5px; } .pct_status_wrapper:after { content: ""; width: 100%; height: 8px; background: var(--blur); position: absolute; bottom: 0; border-radius: 999px; left: 50%; transform: translateX(-50%); } .pct_status_wrapper { position: relative; } .profil_certificate_pct_status { height: 8px; background: var(--clr-mandant); border-radius: 999px; z-index: 1; position: relative; } .profil_certificate { padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--br); background: var(--blur_elevated_into_white); width: 100%; float: left; min-height: 168px; } .edit_profil_modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2000; background: #00000052; width: 100%; height: 100%; } .profil_bg_group:hover button.edit_profil_bg { display: block; } button.edit_profil_bg { position: absolute; top: 2rem; right: 2rem; display: none; } .profil_modal_content { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--bg-light); border-radius: var(--br); width: 100%; max-width: 1340px; z-index: 2001; overflow: hidden; } .modal_sidebar { max-width: 330px; flex: 1; padding: 2rem; background: var(--blur_nav); overflow-y: scroll; height: calc(100vh - 4rem); } .profil_modal_container { display: flex; height: calc(100vh - 4rem); } .form_toolbar { position: fixed; bottom: 0rem; right: 0rem; border-top: 1px solid var(--border); width: 100%; background: var(--bg-white); padding: 1rem 2rem; display: flex; justify-content: end; } input.submit_button { background: var(--clr-mandant); color: var(--fc-white-8); width: auto; border: none; padding: 10px 20px; cursor: pointer; } .modal_section { width: 100%; padding-inline: 1rem; padding-block: 2rem; max-width: 800px; margin: 0 auto; } .overlay_sidebar_steps ol { list-style: none; counter-reset: item; padding: 0; } .overlay_sidebar_steps li:last-child:after { display: none; } div#closeoverlay { background-color: var(--bg-white); border-radius: var(--br); cursor: pointer; padding: 1rem; position: absolute; top: 2rem; right: 2rem; z-index: 999; } div#closeoverlay:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: "\d7"; color: var(--fc-dark); font-size: var(--fs-900); text-align: center; line-height: 1; } .contact_department_wrapper { padding: 1rem; border: 1px solid var(--border); border-radius: var(--br); margin-bottom: 1rem; } .form_section { margin-bottom: 1rem; border: 1px solid var(--border); padding: 2rem; border-radius: var(--br); background: var(--blur_nav); } .form_group input { background: var(--blur_elevated); } .form_group img { border-radius: var(--br); max-width: 370px; object-fit: cover; height: 200px !important; margin: 1rem 0; } .birthday_group_inputs { display: flex; flex-wrap: wrap; gap: 0.5rem; } .birthday_group_inputs .form_group { flex: 1 1 40%; } .image_group_inputs { display: flex; flex-wrap: wrap; gap: 0.5rem; } .image_group_inputs .form_group { flex: 1 1 40%; } .form_section h3 { scroll-margin: 230px; margin-block-end: 0; } .hint { color: orange; font-size: var(--fs-400); margin-bottom: 1rem; } html { scroll-behavior: smooth; } .basic_info_inputs .form_group { flex: 1 1 40%; } .profil label { font-size: var(--fs-300); } .basic_info_inputs { display: flex; flex-wrap: wrap; gap: 0.5rem; } .overlay_sidebar_steps li { counter-increment: item; margin-bottom: 1rem; position: relative; background: var(--blur_nav_active); padding: 10px 20px; border-radius: var(--br); display: inline-block; border: 1px solid var(--border); } .overlay_sidebar_steps li a:hover { filter: brightness(1.25); } .profil_modal_titel { padding-block-start: 4rem; } .overlay_sidebar_steps { padding-block-start: 2rem; } .modal_section_wrapper { width: 70%; flex: 1; padding-block: 4rem; padding-block-end: 4rem; position: relative; height: calc(100vh - 4rem); overflow-y: scroll; } /* Hide scrollbar for Chrome, Safari and Opera */ .modal_sidebar::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .modal_sidebar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } p.profil_desc svg { fill: var(--fc-dark); width: 17px; height: 17px; } p.profil_birthday svg { fill: var(--fc-dark); width: 17px; height: 17px; } p.profil_loc svg { width: 17px; height: 17px; } .profil_content_left { display: flex; flex-direction: column; gap: 0.5rem; padding-block-end: 1rem; } p.profil_desc { display: flex; align-items: center; gap: 5px; line-height: 1; margin: 5px 0; float: left; width: 80%; color: var(--fc-dark); } p.profil_loc { display: flex; align-items: center; gap: 5px; line-height: 1; margin: 5px 0; float: left; width: 80%; font-size: var(--fs-400); } p.profil_birthday { display: flex; align-items: center; gap: 5px; line-height: 1; margin: 5px 0; float: left; width: 80%; font-size: var(--fs-400); } .headline { display: flex; align-items: center; justify-content: space-between; padding-block-end: 1rem; } button.profil_settings { position: absolute; right: 2rem; bottom: 2rem; } .profil_skills { background: var(--blur_elevated); border-radius: var(--br); overflow: hidden; position: relative; padding: 2rem; border: 1px solid var(--border); } .skill { display: inline-block; padding: 10px 20px; border: 1px solid var(--border); border-radius: var(--br); color: var(--fc-dark); } .skill_group { display: flex; gap: 0.5rem; padding: 1rem 0 0; } .profil_meal_statistics { padding: 40px 30px; border-radius: var(--br); border: 3px solid var(--clr-mandant); float: left; width: 100%; position: relative; margin-top: 50px; background: var(--blur_elevated); } .profil_meal_statistics:before { content: ""; background-image: url(/userdata/images/meal_delivery_asset.svg); width: 160px; background-repeat: no-repeat; background-size: contain; display: block; height: 100%; position: absolute; top: -50px; left: 50%; transform: translateX(-50%); } .skill_box_group { display: flex; gap: 0.5rem; padding-bottom: 1rem; } .skill_box { display: inline-block; padding: 10px 20px; border: 1px solid var(--border); border-radius: var(--br); color: var(--fc-dark); cursor: pointer; position: relative; } .skills_group_inputs .form_group .input { width: 100%; } .skill_box:before { content: "x"; position: absolute; top: -4px; right: -4px; background: red; width: 16px; height: 16px; font-size: 12px; border-radius: 999px; letter-spacing: 0; line-height: 1.2; display: block; text-align: center; opacity: 0; } .skill_box:hover:before { opacity: 1; } .skills_group_inputs .form_group { display: flex; align-items: flex-start; flex-direction: column; } /* Profil Ende*/ /* Process */ .scroll_container { display: flex; flex-flow: row; margin: 0 auto; justify-content: center; position: fixed; bottom: 3rem; right: -12px; animation: fadeIn 5s; display: none; scale: 0.8; } .profil .profile_certificate_wrapper a { flex: 1 1 50%; } .news.full_preview .scroll_container { display: block; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .scroll_container:before { content: ""; opacity: 0; } .scroll_container svg { position: sticky; transform: rotate(-90deg); } .scroll_container svg circle { stroke: rgba(0, 0, 0, 0.1); stroke-width: 5px; stroke-linecap: round; fill: transparent; } .scroll_container svg .progress-bar { stroke: url(#grad); transition: stroke-dashoffset 0 ease-in-out; } .scroll_container .pct { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -62%); font-size: var(--fs-300); } /* Process Ende */ /* Sun Moon Toggle */ :root { --toggleHeight: 21px; --toggleWidth: 46px; --toggleBtnRadius: 10em; --bgColor--night: #423966; --toggleBtn-bgColor--night: var(--bgColor--night); --mooncolor: #d9fbff; --bgColor--day: #9ee3fb; --toggleBtn-bgColor--day: var(--bgColor--day); } input#theme-toggle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } input#theme-toggle-mobile { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .tdnn.mobile:after { content: "Ansicht wechseln"; position: absolute; top: 50%; right: -120px; font-size: 14px; transform: translateY(-50%); } .tdnn.mobile { margin: 20px 11px; font-size: 10%; } .tdnn { /*change size of toggle with font-size*/ font-size: 8%; position: relative; height: var(--toggleHeight); width: var(--toggleWidth); border-radius: var(--toggleHeight); transition: all 500ms ease-in-out; background: var(--bgColor--night); cursor: pointer; } .day { background: #ffbf71; } .moon { position: absolute; display: block; border-radius: 50%; transition: all 400ms ease-in-out; top: 3em; left: 3em; transform: rotate(-75deg); width: var(--toggleBtnRadius); height: var(--toggleBtnRadius); background: var(--bgColor--night); box-shadow: 3em 2.5em 0 0em var(--mooncolor) inset, rgba(255, 255, 255, 0.1) 0em -7em 0 -4.5em, rgba(255, 255, 255, 0.1) 3em 7em 0 -4.5em, rgba(255, 255, 255, 0.1) 2em 13em 0 -4em, rgba(255, 255, 255, 0.1) 6em 2em 0 -4.1em, rgba(255, 255, 255, 0.1) 8em 8em 0 -4.5em, rgba(255, 255, 255, 0.1) 6em 13em 0 -4.5em, rgba(255, 255, 255, 0.1) -4em 7em 0 -4.5em, rgba(255, 255, 255, 0.1) -1em 10em 0 -4.5em; } .sun { top: 4.5em; left: 22em; transform: rotate(0deg); width: 7em; height: 7em; background: #fff; box-shadow: 3em 3em 0 5em #fff inset, 0 -5em 0 -2.7em #fff, 3.5em -3.5em 0 -3em #fff, 5em 0 0 -2.7em #fff, 3.5em 3.5em 0 -3em #fff, 0 5em 0 -2.7em #fff, -3.5em 3.5em 0 -3em #fff, -5em 0 0 -2.7em #fff, -3.5em -3.5em 0 -3em #fff; } /* Sun Moon Toggle */ /* Tasks */ .tasks .container, .tasks .main-screen { padding: 0; max-width: 100%; } .tasks div#hero_content { display: none !important; } .tasks_container { display: flex; width: 100%; gap: 3rem; min-height: calc(100vh - 50px); } .tasks { width: 100%; float: left; } .task_item_list.done .task_item { display: none; text-decoration: line-through; } span.number:before { content: "("; } span.number:after { content: ")"; } span.number { font-size: var(--fs-300); opacity: 0.5; } .collection_list.news { padding: 10px; flex: 0 0 25%; } @media (width < 1400px) { .collection_list.news { flex: 0 0 33%; } } @media (width < 768px) { .collection_list.news { flex: 0 0 50%; } } @media (width < 768px) { .collection_list.news { flex: 0 0 50%; } } @media (width < 425px) { .collection_list.news { flex: 0 0 100%; } } .flex_container { display: flex; flex-wrap: wrap; } .tasks_list_overflow { overflow-y: scroll; max-height: 700px; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding-right: 1rem; } label { font-size: var(--fs-500); } p.task_done_title { background: var(--bg-light); padding: 5px 10px; border-radius: var(--br); cursor: pointer; } p.new_list { position: absolute; bottom: 1rem; left: 1rem; cursor: pointer; font-size: var(--fs-400); } form.create_list, form.create_task_dashboard { display: flex; flex-direction: column; gap: 0.5rem; } .done .task_item span.complete_task:before { content: "\2713"; color: var(--fc-white-8); font-size: 9px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; flex-grow: 0; line-height: 1.5; } .done .complete_task { background: var(--clr-mandant); border: 1px solid var(--clr-mandant); } .tasks_groups_wrapper { flex: 1 1 15%; background: var(--blur_elevated); padding: 3rem 1rem; border-right: 1px solid var(--border); } .tasks_wrapper { flex: 1 1 60%; display: flex; flex-direction: column; gap: 1rem; padding-block: 3rem; position: relative; } .task_item_list { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .tasks_groups_wrapper li.active { background: var(--bg-light); color: var(--fc-dark); border-radius: var(--br); } .tasks_groups_wrapper li { padding: 10px 17px; } .tasks_groups_wrapper ul { padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .tasks_content_wrapper { flex: 1 1 25%; background: var(--blur_elevated); padding: 3rem 2rem; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 1rem; opacity: 0; } .change_opacity { opacity: 1; } .task_item { padding: 14px 40px; border: 1px solid var(--border); border-radius: var(--br); position: relative; cursor: pointer; background-color: var(--blur_elevated); color: var(--fc-dark); } .task_item_card_info { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-300); padding-block-start: 1rem; } .complete_task { width: 17px; height: 17px; border-radius: 999px; border: 1px solid var(--border); position: absolute; left: 12px; top: 16px; } p.task_item_card_text { font-size: var(--fs-300); padding-left: 1.5rem; } .due_date { padding: 10px; width: 100%; border: 1px solid var(--border); font-family: inherit; border-radius: var(--br); background: transparent; color: var(--fc-dark); accent-color: var(--clr-mandant); } .task_item_card { padding: 1rem; border-radius: var(--br); border: 1px solid var(--border); } .tasks_groups_wrapper li svg { fill: var(--fc-primary); width: 15px; height: 15px; } .active_item { filter: var(--dark_bright); border: 1px solid var(--clr-mandant); } .tasks_groups_wrapper li:hover { background: var(--bg-light); color: var(--fc-dark); } .tasks_groups_wrapper li { border-radius: var(--br); display: flex; align-items: center; gap: 0.5rem; position: relative; } .delete_task svg { fill: var(--fc-primary); width: 15px; } .delete_task { position: absolute; bottom: 1rem; right: 1rem; cursor: pointer; } .tasks_groups_wrapper li:hover span.delete_group { opacity: 1; } span.delete_group { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); cursor: pointer; opacity: 0; display: flex; } h4.task_item_card_title { position: relative; padding-left: 1.5rem; } h4.task_item_card_title span.complete_task { left: 0; top: 1px; } .tasks a.ui.label.hidden.transition { visibility: hidden; display: none; } form.edit_task { display: flex; flex-direction: column; gap: 1rem; } form.create_task { display: flex; gap: 1rem; position: absolute; bottom: 2rem; width: 100%; } input.send_task { flex: 1; background: var(--clr-mandant); border: 0; cursor: pointer; color: var(--fc-white-8); } input.add_task { background: var(--blur_elevated); padding: 1rem 1rem; } input.add_task::placeholder { color: var(--clr-mandant) !important; opacity: 1; } input.button_main { cursor: pointer; background: var(--clr-mandant); color: var(--fc-white-8); border: 1px solid var(--clr-mandant); } select.change_task_group { max-width: 347px; } li.active_list { background: var(--bg-light); border-radius: var(--br); color: var(--fc-dark); } /* .dashboard .tasks { display: none; } */ .tasks_wrapper_dashboard { display: flex; flex-direction: column; gap: 1rem; } .tasks_container_dashboard { padding: 40px 30px; border-radius: var(--br); border: 1px solid var(--border); float: left; width: 100%; position: relative; background: var(--blur_elevated); margin-bottom: 2rem; } .warm .tasks_container_dashboard { border-left: none; border-right: none; border-radius: 0; } .tasks_wrapper_dashboard .tasks_list_overflow { max-height: 400px; padding-right: 0; } .tasks_container_dashboard .task_item { border: none; border-bottom: 1px solid var(--border); border-radius: 0; } .tasks_container_dashboard .task_item:last-child { border: none; border-bottom: none; border-radius: 0; } .tasks_container_dashboard .task_item.asap { border: 1.5px solid #bc2929; border-radius: var(--br); background: #ff00000a; color: #bc2929; } h3.certificate_headline { color: var(--fc-white); margin: 0 0 5px; } .collection_content.accept_certificate { width: 100%; float: left; padding: 0 15px; } .tasks_container_dashboard .task_item.asap .complete_task { border: 1.5px solid #bc2929; } .task_item.asap span.complete_task:hover:before { background: #ff00000a; color: #bc2929; } .mobile_menu_toggle { display: none; cursor: pointer; } .mobile_menu_toggle svg { fill: var(--fc-primary); width: 15px; height: 15px; } button#back { background: none; text-align: left; padding: 0; font-size: var(--fs-300); display: none; } .task_item span.complete_task:hover:before { content: "\2713"; color: var(--fc-white-8); font-size: 9px; background: var(--bg-light); display: flex; justify-content: center; align-items: center; flex-shrink: 0; flex-grow: 0; line-height: 1.7; border-radius: 999px; } form.create_task_dashboard { display: none; } .add_svg_content { display: flex; cursor: pointer; } .tasks_container_dashboard input.add_task { margin-bottom: 0.5rem; } .add_svg_content svg { fill: var(--fc-dark); width: 15px; height: 15px; } .select_group_and_toggle_creation_form { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } /* Hide scrollbar for Chrome, Safari and Opera */ .tasks_wrapper_dashboard .tasks_list_overflow::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .tasks_wrapper_dashboard .tasks_list_overflow { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .animated_check { animation: appear 0.7s cubic-bezier(0.18, 0.89, 0.32, 1.28); background-color: var(--clr-mandant); } .animated_check:before { content: "\2713"; color: var(--fc-white-8); font-size: 9px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; flex-grow: 0; line-height: 1.7; border-radius: 999px; } @keyframes appear { 0% { opacity: 0; transform: scale(2); } 100% { opacity: 1; transform: scale(1); } } .onboarding div#mandant_switch, .onboarding div#horizontal_nav_bar, .onboarding nav, .onboarding .sidebuttons, .onboarding div#hero_content, .onboarding button#backButton, .onboarding div#footer-header, .onboarding div#mandant_switch_responsiv, .onboarding .create_collection_wrapper { display: none !important; } .onboarding h2:before { display: none; } .onboarding main, .onboarding .main-screen { width: 100%; padding: 0; margin: 0; } .title_with_img img { width: 40px !important; height: 40px !important; } .collection_content.ob_documents .filegallery_content_file:before { filter: invert(1); } .collection_list.projektverlauf { width: 100%; padding-left: 50px; padding-right: 0; } .title_with_img span { font-size: 14px; font-weight: 400; display: block; } .onboarding main { background: #eefbfb; } .onboarding h2 { font-size: 23px; } .collection_list.projektverlauf:last-child:after { display: none; } .collection_list.projektverlauf:before { content: ""; width: 17px; height: 17px; position: absolute; left: 0; top: 70px; background: #6bc1c3; border-radius: 999px; } .collection_list.projektverlauf:after { content: ""; width: 2px; height: 468px; position: absolute; left: 7px; top: 86px; background: #6bc1c3; } .collection_content.ob_documents .filegallery_content { border: none; padding: 0; background: none; } .collection_container.Bereits.abgeschlossen h3.collection_content.projektverlauf__title.title.custom:before { content: ""; width: 27px; height: 20px; display: inline-block; background-image: url(/userdata/images/check-circle-fill.png); background-repeat: no-repeat; background-size: contain; position: relative; top: 2px; } .collection_container.Bereits.abgeschlossen:before { content: "Bereits abgeschlossen"; position: absolute; top: 28px; left: 3rem; font-size: 11px; opacity: 0.5; } .collection_content.ob_documents { padding: 1.5rem; background: #fff; border-radius: 25px; border: 1px solid #d3f3f3; margin-bottom: 2rem; } .title_with_img { display: flex; align-items: center; justify-content: space-between; } .collection_content.ob_img { flex-shrink: 0; } .collection_content.ob_ansprechpartner_vertrieb { width: 100%; float: left; padding-block-end: 3rem; } .collection_content.ob_title { font-size: var(--fs-900); font-weight: var(--fw-bold); } .collection_content.ob_img img { width: 80px !important; height: 80px !important; border: 1px solid var(--border); border-radius: var(--br); padding: 10px; object-fit: contain; } .collection_content.ob_ansprechpartner_vertrieb .collection_container { display: flex; align-items: center; flex-direction: row-reverse; justify-content: flex-end; gap: 1rem; } .onboarding .container { max-width: 100%; padding: 0; } .collection_full.onboarding { min-height: 100vh; background: #eefbfb; } .collection_content.av_img img { width: 100px !important; height: 100px !important; object-fit: cover; object-position: top; border-radius: 999px; border: 1px solid var(--border); } .collection_content.ob_ansprechpartner_vertrieb .collection_container { display: flex; align-items: center; flex-direction: row-reverse; justify-content: flex-end; } .collection_content.ob_ansprechpartner_vertrieb .collection_list.vertrieb { padding: 0; width: 100%; } .collection_content.ob_title_img { display: flex; align-items: center; gap: 1rem; padding-block-end: 2rem; } .onboarding_container_header { padding: 0.5rem 2.5rem; background: #6cbcbd; display: flex; align-items: center; justify-content: space-between; color: #fff; } .link_login a { text-decoration: underline; color: #6cbcbd; } .onboarding_overlay { display: none; position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100%; background: #00000060; /* display: flex; */ justify-content: center; align-items: center; } .onboarding_content_title { display: flex; align-items: center; gap: 1rem; } .onboarding_content_title img { max-width: 50px; } .collection_content.ob_user, .collection_content.ob_pw { padding: 1rem; border: 1px solid var(--border); border-radius: var(--br); position: relative; margin-bottom: 2.5rem; } .collection_content.ob_user:before { content: "Benutzername:"; position: absolute; top: -25px; left: -1px; font-size: 14px; } .collection_content.ob_pw:before { content: "Passwort:"; position: absolute; top: -25px; left: -1px; font-size: 14px; } .onboarding_content_title h2 { margin: 0; } .onboarding_content_title { display: flex; align-items: center; gap: 1rem; margin-bottom: 4rem; } .collection_content.ob_user:after, .collection_content.ob_pw:after { content: ""; background-image: url(/userdata/images/copy.png); width: 15px; height: 15px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background-size: contain; pointer-events: none; } .onboarding_container { background: #fff; border-radius: 25px; width: 100%; overflow: hidden; max-width: 430px; } button#close_overlay { background: transparent; } .onboarding_content { padding: 2.5rem; } .collection_content.ob_termin { background: linear-gradient(275deg, rgba(105, 201, 203, 1) 0%, rgba(108, 187, 188, 1) 100%); color: #fff; padding: 1.5rem; border-radius: 25px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .collection_content.ob_zeitraum { background: #fff; padding: 1.5rem; border-radius: 25px; display: flex; border: 1px solid #d3f3f3; justify-content: space-between; align-items: center; margin-bottom: 1rem; } span.field_description_title { font-size: 23px; font-weight: 700; } img.bc_logo { max-width: 200px; } .ob_footer>div { display: flex; align-items: center; gap: 1rem; opacity: 0.5; } .ob_footer { display: flex; align-items: center; justify-content: space-between; padding-block-start: 3rem; } .collection_content.ob_ansprache { line-height: 1.7; } .tooltip_button { display: block; padding-block: 1rem; opacity: 0.5; font-size: 14px; } button#open_ob_overlay { background: #6ac2c4; } h3.collection_content.projektverlauf__title.title.custom { font-size: 21px; } .collection_list.projektverlauf .collection_container { background: #fff; border-radius: 25px; border: 1px solid #d3f3f3; display: flex; align-items: center; flex-direction: row; gap: 1rem; overflow: hidden; } .collection_content.pv_img { height: 100% !important; position: absolute; right: 0; width: 20%; } .collection_content.ob_text { width: 100%; padding: 3rem; } .collection_content.pv_img { flex: 1 1 30%; } .collection_content.onboarding_right { background: #eefbfb; width: 57%; float: right; } .collection_content.onboarding_left, .collection_content.onboarding_right { min-height: 100vh; } .onboarding_right { padding: 5rem 10rem; } .collection_content.onboarding_left { background: #f9ffff; padding: 6rem; } .collection_content.onboarding_left { position: fixed; left: 0; top: 0; width: 43%; z-index: 1; border-bottom-right-radius: 100px; border-top-right-radius: 100px; } .collection_container.Bereits.abgeschlossen { border: 2px solid #6eee6e; } /* Termine */ .collection_content .contactformular { padding: 0; margin-bottom: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; } .fa_time:empty, .fa_date:empty { display: none; } .fa_textconten { color: var(--fc-dark); max-width: 93%; } .fa_wrapper { position: relative; } .fa_list:before { content: ""; width: 1px; height: 1rem; background: var(--border); position: absolute; left: 1rem; bottom: -1rem; } .fa_wrapper:last-child .fa_list:before { display: none; } .fa_svg_content svg { width: 17px; height: 17px; fill: var(--fc-primary); } .fa_container:hover .fa_tooltip { display: block; } .fa_list { padding-block-start: 1rem; } .fa_container { border: 1px solid var(--border); padding: 1rem; border-radius: var(--br); position: relative; } .fa_tooltip { display: none; position: absolute; width: 100%; background: var(--bg-white); color: var(--fc-dark); padding: 1rem; text-align: center; border-radius: var(--br); border: 1px solid var(--border); left: 50%; transform: translateX(-50%); top: -90px; z-index: 999; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; } .future_appointments { padding: 2rem; border-radius: var(--br); border: 1px solid var(--border); background: var(--blur_elevated); width: 100%; float: left; } .dashboard .future_appointments { margin-bottom: 2rem; } span.infoboard_contact_tooltip:empty { display: none !important; } .fa_container:hover .fa_tooltip { display: flex; justify-content: center; flex-direction: column; } .fa_shortcut { display: inline-block; padding: 4px 7px; border-radius: var(--br); position: relative; background: var(--border); } .fa_facts { display: flex; align-items: center; gap: 0.5rem; padding-block-end: 5px; } .fa_shortcuts { display: flex; gap: 0.5rem; flex-wrap: wrap; } .fa_svg_content { display: flex; align-items: center; } .fa_shortcut:empty { display: none; } .fa_content { display: flex; align-items: center; justify-content: space-between; } .termine_headline .textcontent { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .collection_list.termine { width: 50%; padding: 10px; } .collection_list.termine .collection_container { width: 100%; float: left; } .mobile_navigation { display: none; } .mobile_navigation_container { display: flex; align-items: center; gap: 10px; justify-content: center; width: 100%; padding: 5px; } .mobile_navigation a { display: flex; align-items: center; flex-direction: column; font-size: 10px; gap: 4px; flex: 1; } .mobile_navigation_container a { position: relative; } a:not([class]) { text-decoration-skip-ink: auto; } .mobile_navigation_container .hint { position: absolute; right: 15px; top: -5px; left: unset; } .mobile_navigation svg { width: 19px; height: 19px; fill: var(--fc-dark); } body.dashboard .qr_widget, body.dashboard .qr-code__title, body.dashboard .qr-code__text, body.dashboard #qrcode { display: none !important; } .qr-code-container { display: flex; padding: 20px; } .qr_widget { background: #ffffff; border-radius: var(--br); padding: 25px 30px; display: flex; align-items: center; gap: 30px; border: 1px solid var(--border); max-width: 630px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); width: 100%; } .qr_widget .block_left { flex: 1; } .qr-code__title { font-size: 22px; font-weight: 700; margin-bottom: 8px; color: #000; } .qr-code__text { font-size: 15px; color: #555; line-height: 1.5; } #qrcode { width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; } #qrcode canvas { width: 220px !important; height: 220px !important; } @media (max-width: 600px) { .qr_widget { flex-direction: column; text-align: center; gap: 15px; padding: 20px; } .qr_widget .block_left { text-align: center; } #qrcode { width: 200px; height: 200px; } #qrcode canvas { width: 200px !important; height: 200px !important; } } div#mandant_switch_responsiv { display: none; } @media (max-width: 700px) { /* PDF viewer hidden or resized on small screens */ body.awo.organigramm_temp .textcontent embed[type="application/pdf"], body.awo.organigramm_temp .textcontent iframe[type="application/pdf"] { width: 100% !important; height: calc(100vh - 120px) !important; max-height: calc(100vh - 120px) !important; border: none; display: none !important; /* Hide PDF viewer on mobile */ } /* Mobile hint text */ .orga-pdf-hint { font-size: 14px; margin: 10px 0 6px; color: #555; margin-left: 15px; } /* Mobile button */ .orga-pdf-link { display: inline-block; padding: 10px 18px; border-radius: 4px; background: #e2001a; color: #fff; text-decoration: none; font-weight: 600; margin-left: 15px; } } /* MOBILE NAVIGATION */ @media (max-width: 500px) { .mobile_navigation { display: flex !important; justify-content: space-around; align-items: center; position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; z-index: 2000; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: 0 -2px 25px rgba(0, 0, 0, 0.15); } } /* QM – TITLE + IMAGE FIX BELOW 392PX */ @media (max-width: 392px) { .qm_container a .block_right h5 { font-size: 16px !important; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; max-width: 100%; } .qm_container a img { max-width: 90px; } } /* NEWS PAGE – RESPONSIVE SPLIT */ @media (max-width: 992px) { .collection_container.AWO.Aktuell { display: flex; flex-direction: column; gap: 20px; } .collection_container.AWO.Aktuell .news_content_left, .collection_container.AWO.Aktuell .news_content_right { width: 100% !important; max-width: 100% !important; } .collection_container.AWO.Aktuell .news_content_left { order: 1; } .collection_container.AWO.Aktuell .news_content_right { order: 2; } .collection_container.AWO.Aktuell .news_content_right h3, .collection_container.AWO.Aktuell .artikeltext, .collection_container.AWO.Aktuell .teaser { margin-top: 10px; } } /* FILTER BAR – HORIZONTAL SCROLL BELOW 500PX */ @media (max-width: 500px) { .filter_display { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 10px; padding-bottom: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .filter_display::-webkit-scrollbar { display: none; } .button_filter_wrapper_2 { flex: 0 0 auto; white-space: nowrap; } } /* KNOWLEDGE CENTER GRID */ .grid_knowledgecenter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; } /* 730px → 3 columns */ @media (max-width: 730px) { .grid_knowledgecenter { grid-template-columns: repeat(3, 1fr); } } /* 500px → 2 columns */ @media (max-width: 500px) { .grid_knowledgecenter { grid-template-columns: repeat(2, 1fr); } } /* 400px → 1 column */ @media (max-width: 400px) { .grid_knowledgecenter { grid-template-columns: repeat(1, 1fr); } } /* PDF EMBED – BASE */ #area-2 embed { width: 100% !important; height: 100vh !important; border: none; display: block; } /* BELOW 992PX */ @media (max-width: 992px) { #area-2 embed { height: 90vh !important; } } /* BELOW 768PX */ @media (max-width: 768px) { #area-2 embed { height: 80vh !important; } } /* BELOW 500PX */ @media (max-width: 500px) { #area-2 embed { height: 75vh !important; } } /* BELOW 400PX */ @media (max-width: 400px) { #area-2 embed { height: 70vh !important; } } /* Termine */ @media (max-width: 1550px) { /* .dashboard .news_dashboard > div:nth-child(3) .collection_content.vorschaubild img { max-width: 55%; } */ } @media (max-width: 1450px) { /* :root { --fs-600: .9em; } */ .contact_mail { min-width: 240px; } .tasks_content_wrapper { position: absolute; right: 0; background: var(--blur); top: 0; height: 100%; } .contact_group.list_form .contact_head { min-width: 250px; } .contact_phone { min-width: 160px; } nav { width: 220px; } .playground main { left: 220px; } div#horizontal_nav_bar { width: calc(100% - 220px); } main { width: calc(100% - 220px); } } @media (max-width: 1400px) { .ankuendigungen_dashboard { position: relative; top: unset; right: unset; max-width: 500px; padding-inline: 10px; margin-top: 1rem; width: 100%; float: left; } .contact_card_list { width: 33.33%; } .collection_content.onboarding_left { padding: 2rem; } } @media (max-width: 1300px) { .dashboard .news_dashboard> :not(:first-child) { flex: 0 0 calc(50% - 15px); } /* .dashboard .news_dashboard> :last-child { flex: 0 0 calc(100% * 1); } */ } @media (max-width: 1249px) { :root { --toggleHeight: 23px; --toggleWidth: 49px; } .stellen_wrapper { grid-template-columns: repeat(3, 1fr); } .collection_content.onboarding_left { position: relative; width: 100%; border-radius: 0; } .kc_category_line_list { grid-template-columns: repeat(3, 1fr); /* Vier Spalten für Desktop */ } .collection_content.onboarding_right { width: 100%; padding: 2rem; } .collection_content.onboarding_left, .collection_content.onboarding_right { min-height: auto; } .ankuendigungen_dashboard { max-width: unset; } .collection_list.news.ankuendigungen .collection_container { background-size: 12%; } div#logo-area { display: none; } .mandant_link.active img { width: 100px !important; } .mandant_link img { width: 90px !important; padding: 0.5rem; } div#button-area .component.externe_login_links { right: unset; left: 50%; transform: translateX(-50%); } div#toggle_navigation { display: block !important; } nav { width: 100%; height: 60px; z-index: 1; } div#log_out { display: none; } div#horizontal_nav_bar { display: none; } div#header_1 img { height: 50px !important; padding: 10px; object-fit: contain; max-width: 160px; } main { width: 100%; padding-top: 60px; position: relative; overflow-x: hidden; } .playground main { left: 0; } div#header { height: 100%; display: flex; align-items: center; justify-content: space-between; } div#header_2 { display: none; } div#toggle_navigation:hover, div#toggle_navigation:active, div#toggle_navigation:focus { background: transparent; } #cookie-bar>p { line-height: 20px; } } @media (max-width: 1024px) { .collection_list { width: 50%; } .sidebuttons { display: none; } .kc_category_line_list { grid-template-columns: repeat(2, 1fr); /* Vier Spalten für Desktop */ } .mandant_link img:hover { width: 60px !important; } .mandant_link img { padding: 5px; width: 55px !important; height: 40px; } .mandant_link.active img { border: 1.5px solid var(--clr-mandant); width: 55px !important; border-right: none; opacity: 1; } a.game_card { height: auto; max-width: 50%; } } @media (max-width: 992px) { .news.full_preview .scroll_container { display: none; } .contact_card_list { width: 50%; } .stellen_wrapper { grid-template-columns: repeat(2, 1fr); } .footer-sitemap ul { flex-wrap: wrap; } div#cookiewarnung { width: 90%; } .collection_full.news .title.custom { padding-right: 0 !important; } .collection_content_full { padding: 3rem; } .collection_full.news .collection_content.teaser { padding: 3rem; } .collection_full.news .collection_content { padding: 0 3rem; } } @media (max-width: 768px) { #cookie-bar { text-align: center; } .kc_category_line_list { grid-template-columns: repeat(1, 1fr); /* Vier Spalten für Desktop */ } .task_item, input.add_task, input.send_task { font-size: calc(var(--fs-700) * 1.2); } .collection_list.history .collection_container { min-height: 100vh; padding-right: 0; overflow: hidden; justify-content: flex-start; padding-top: 9rem; } .mobile_menu_toggle { display: block; } .tasks_groups_wrapper { position: absolute; z-index: 1; background: var(--bg-white); height: 100%; width: 100%; } .tasks_container { gap: 1rem; } .historie main { width: 100%; padding: unset; padding-top: 60px; } h3.collection_content.history__title.title.custom { font-size: calc(var(--fs-900) * 1.5); } h3.collection_content.history__title.title.custom:before { font-size: 16px; } .owl-navigation { position: absolute; left: 50%; top: unset; rotate: unset; transform: translate(-50%, -50%); right: unset; bottom: 3rem; } .collection_content.history_teaser, h3.collection_content.history__title.title.custom { text-align: center; padding-inline: 1rem; margin: unset; max-width: unset; width: 100%; } .el_category_list { float: left; width: 100%; padding-block-end: 2rem; } .collection_list.changelog:last-child { padding-block-end: 0; } .anpassung_melden .row { padding: 1rem; border-radius: var(--br); } .inhouse { padding-block-end: 0; } div#hero_content .col-xs-12 { padding-block-end: 0; } .tasks_groups_wrapper { display: none; } .tasks_wrapper { max-width: 95%; margin: 0 auto; } .tasks_container { min-height: calc(100vh - 60px); } .tasks_list_overflow { padding-right: 0rem; max-height: unset; overflow: visible; } div#content-collection { width: 100%; } button#back { display: block; } .complete_task { top: 13px; } .collection_list.plattformen { padding: 5px 15px; } .plattformen .filter_display { padding-block-end: 10px; } .collection_list.plattformen .collection_container { padding: 1rem; } .collection_content.plattform_img img { width: 30px !important; } .tasks_content_wrapper { width: 100%; background: var(--bg-white); display: none; } form.create_task { bottom: 3rem; } .tasks_content_wrapper { padding: 1rem 1rem; } .tasks_container textarea { min-height: 100px; } .tasks_wrapper { padding-block: 1rem; } .change_opacity { opacity: 1; z-index: 1; display: flex; } h4.task_item_card_title { font-size: 16px; } form.create_task { gap: 0.5rem; flex-direction: column; position: relative; bottom: unset; left: unset; top: unset; right: unset; } .changelog_collection { background: none; padding: 0 10px; border: none; overflow-y: visible; max-height: unset; } a.el_post_link { flex: 1 1 100%; } .el_post svg { fill: var(--fc-dark); } .gift_container { flex: 1 1 60%; } .basic_info { gap: 0.5rem; } div#closeoverlay:after { line-height: 1.3; } .modal_section { padding-block: 1rem; } .collection_list.changelog.not_read .collection_container { display: flex; gap: 1rem; flex-direction: column; } .collection_list.changelog { padding-block-end: 3rem; } .basic_info_inputs .form_group { flex: 1 1 50%; } .form_section { margin-bottom: 1rem; padding: 1rem; } .modal_sidebar { display: none; } .image_group_inputs .form_group { flex: 1 1 50%; } .forwarding_text { gap: 1rem; } .infoboard_meeting { padding-left: 0; } .infoboard_meeting:after { display: none; } .collection_list.news.ankuendigungen:after { right: 48px; } .kc_category_list .row { margin-block-end: 1rem; } .contact_card_list { width: 100%; padding-inline: 0; } .contact_head { gap: 0.5rem; padding-block-end: 0.5rem; } .certificate_container { padding: 1rem; } .contact_img.img_container { width: 40px; } .contact_tag { font-size: var(--fs-300); } .departments_content.row { padding-block-end: 1rem; } p.certificate_paragraph { padding-block-end: 5px; } .departments.row .pop-up-button { border-bottom: 1px solid var(--border); border-bottom-left-radius: var(--br); border-bottom-right-radius: var(--br); } .pop-up-button.current { border-bottom: 1px solid var(--clr-mandant); } .pop-up-button { margin-top: 0rem; } .contact_card { background: var(--blur_elevated); min-height: unset; } .contact_group { padding: 0; border: none; } .kontaktdaten_content { padding-inline: 0rem; } .visitenkarten_betriebsrat { display: none; } .adress.row { padding: 0rem; background: none; } .kontaktdaten_list .headline { padding-inline: 0rem; padding-block-start: 1rem; } .all_mandant { padding: 1rem 0rem; padding-block-start: 0; } .departments.row { white-space: nowrap; flex-wrap: nowrap; overflow-y: scroll; } .certificate_question { padding: 1rem; } .answer_input { flex: 1 1 60%; } .el_category { flex-direction: column; } img.el_img { height: 200px !important; max-width: 100% !important; } .el_content { padding-inline: 1rem; height: 80px; } .card { scale: 0.2; width: 50px; } :root { --fs-600: 0.8em; --fs-900: 1.5em; } .major_group .row { padding: 1rem; margin-block-end: 1rem; } .adress.row { gap: 0.5rem; } h3.kc_current_category { padding-block-start: 0.5rem; } .knowledgecenter .kc_category_line_list { margin-block-end: 1rem; } .kc_category { min-height: auto; height: 100%; } .collection_full.knowledgecenter-post .owl-item img { height: auto !important; } .content_blade { display: none; } .collection_full.knowledgecenter-post .collection_content.kc_teaser, .collection_full.knowledgecenter-post .collection_content.kc_article { padding: 0; margin-block: 0.5rem; border: none; background: transparent; } .collection_full.knowledgecenter-post .collection_content.kc_teaser:after { display: none; } .collection_content.kc_video iframe { height: 190px; } .my_bookmarks .headline { padding-bottom: 1rem; } .my_bookmarks { padding: 1.5rem; } .knowledgecenter div#hero_content { height: 160px; } .knowledgecenter-post div#hero_content { height: 160px; } a.kc_category_link { flex: 1 1 50%; } .dashboard .news_dashboard { display: flex; flex-wrap: wrap; height: auto; } .profil_banner { padding: 1.5rem; } .dashboard .owl-nav { justify-content: center; } .future_appointments { padding: 1.5rem; margin-block: 1rem; } .dashboard .kc_group_container { padding: 0; display: flex; flex-direction: column; gap: 1rem; padding-bottom: 0; background: none; border: none; margin-bottom: 1rem; } .meal_delivery_group { padding: 1.5rem 1.5rem; margin-top: 4rem; } .collection_list.news.ankuendigungen h3.collection_content.news.ankuendigungen__title.title.custom { min-height: 45px; } button.infoboard_day_button { top: 0; position: relative; margin-bottom: 1rem; } .content_day.this_day { border-right: none; border-bottom: 1px solid var(--border); padding-block-end: 1rem; margin-top: -35px; } .dashboard .collection_list.news:nth-child(1) .collection_container { padding-bottom: 4rem; } .dashboard .collection_list.news .collection_container { padding: 1.5rem; padding-bottom: 4rem; } .infoboard_boxes { gap: 1.5rem; flex-direction: column; } .news .collection_list.news .collection_container .collection_content.vorschaubild img { height: 200px !important; } .collection_list.termine { width: 100%; padding: 10px 0; } h3.collection_content.termine__title.title.custom { width: 100%; float: right; padding-left: 0.5rem; margin-bottom: 0.5rem; } .dashboard .collection_list.news .collection_container:before { content: "mehr lesen"; background: var(--clr-mandant); border-radius: calc(var(--br) - 4px); padding: 5px 10px; position: absolute; bottom: 1.5rem; color: #fff; left: 1.5rem; } .dashboard .collection_list.news:nth-child(1) .collection_container:before { bottom: 1.5rem; left: 1.5rem; } h3.collection_content.title.custom { -webkit-line-clamp: 2; } #cookie-bar #cookie-bar-button { float: none; margin-left: 0; margin-top: 10px; } .bg_svg_container { display: none; } #cookie-bar>p { float: none; } .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { padding-left: 5px; padding-right: 5px; } .container { padding-left: 10px; padding-right: 10px; } .pop-up-button { margin-top: 1rem; margin-bottom: 1rem; } .pop-up-button-group .row { flex-wrap: wrap; margin-left: 7px; } #privacy-policy .footer-1, div#privacy-policy { text-align: center !important; } div#privacy-policy ul { padding: 0 !important; margin: 0 !important; } .component.privacy_policy { padding: 20px 0 0 0; } div#cookiewarnung { font-size: 13px !important; } .owl-item img { height: auto !important; } .owl-item img.kc_img { height: 210px !important; } div#header_1 img { padding: 5px; } .component_logo { padding: 5px; } .profil_certificate { background: var(--blur_elevated); } .dashboard .profil_banner.certificate { padding-block-start: 0; padding-inline: 0; background: none; border: none; width: 100%; float: left; margin-block-end: 1rem; } button.profil_settings { right: 1rem; bottom: 1rem; } .collection_list.news.ankuendigungen .collection_container { background-size: 28%; } .kontaktdaten_list { background: none; border: none; padding: 0; } } @media (max-width: 600px) { .collection_list { width: 100%; } .stellen_wrapper { grid-template-columns: repeat(1, 1fr); } .ob_footer { display: none; } .collection_content.ob_text { padding: 1rem; } .collection_list.projektverlauf:before, .collection_list.projektverlauf:after { display: none; } .collection_list.projektverlauf { padding-left: 0; padding-right: 0; } h3.collection_content.projektverlauf__title.title.custom { font-size: 16px; } span.field_description_title { font-size: 19px; } .filegallery_content_file { flex-direction: column; align-items: baseline; } .onboarding h2 { font-size: 19px; } .collection_content.ob_zeitraum { flex-direction: column; align-items: baseline; } .collection_content.onboarding_right { padding: 1rem; } .collection_content.onboarding_left { padding: 1rem; } .collection_content.ob_title_img { flex-direction: column; align-items: baseline; } .collection_content.ob_img img { width: 60px !important; height: 60px !important; padding: 5px; } } @media (max-width: 500px) { img.profil_bg { height: 110px !important; } div#keyboard { scale: 0.7; left: 0; position: relative; right: 0; transform: unset; bottom: -430px !important; padding-block-end: 2rem; } a.game_card { max-width: 100%; } a.wordle_info { display: none; } .news .collection_list.news .collection_container { min-height: 340px; } div#mandant_switch { display: none; } .toggle_mandant_switch { display: none; } .profil_header { padding-block-end: 6rem; padding-inline: 1rem; padding-block-start: 40px; } .profil_skills { padding: 1rem; } .container { padding-left: 5px; padding-right: 5px; } /* .collection_list.news { padding: 5px 0; } */ .main-screen { padding: 1rem 0; } .news.full_preview .collection_full { padding-block: 1rem; } .dashboard div#hero_content { height: 170px; } div#hero_content { height: 100px; } .breadcrumb { padding-inline: 5px; white-space: nowrap; overflow-x: scroll; } /* Hide scrollbar for Chrome, Safari and Opera */ .breadcrumb::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .breadcrumb { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } div#hero_content>.container { gap: 0.5rem; } .dashboard .ankuendigungen_dashboard .collection_list.news.ankuendigungen .collection_container { padding: 1rem; min-height: auto; padding-right: 100px; } .dashboard .ankuendigungen_dashboard .collection_list.news.ankuendigungen:nth-child(1) .collection_container { padding-bottom: 1rem; } .collection_full.news .title.custom { font-size: var(--fs-900); } iframe { height: 210px; } .collection_content_full { padding: 1rem 1rem 0rem 1rem; } .collection_full.news .collection_content.teaser { padding: 0 1rem 1rem 1rem; margin-top: 0rem !important; } .collection_full.news .collection_content.artikeltext { padding-block: 1rem; } .collection_full.news .collection_content.vorschaubild img { height: auto !important; } .collection_full.news .collection_content { padding: 0 1rem; } .container { min-width: 250px; } .forwarding-wrapper { gap: 1rem; margin-right: -20px; padding-right: 20px; } .component.login_hintergrund { display: none; } div#login_form { box-shadow: none; padding: 1rem; } .component.icon_logo_login { display: block; } } @media (max-width: 390px) { .collection_content_full { padding: 0; background: none; } .collection_full.news .collection_content.teaser { padding: 1rem 0; margin-top: 0rem !important; } .collection_full.news .collection_content { padding: 1rem 0; background: none; } } @media (min-width: 768px) { .responsiv_mandants { display: none; } .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 { float: left; } .col-sm-12 { width: 100%; } .col-sm-11 { width: 91.66666667%; } .col-sm-10 { width: 83.33333333%; } .col-sm-9 { width: 75%; } .col-sm-8 { width: 66.66666667%; } .col-sm-7 { width: 58.33333333%; } .col-sm-6 { width: 50%; } .col-sm-5 { width: 41.66666667%; } .col-sm-4 { width: 33.33333333%; } .col-sm-3 { width: 25%; } .col-sm-2 { width: 16.66666667%; } .col-sm-1 { width: 8.33333333%; } .col-sm-pull-12 { right: 100%; } .col-sm-pull-11 { right: 91.66666667%; } .col-sm-pull-10 { right: 83.33333333%; } .col-sm-pull-9 { right: 75%; } .col-sm-pull-8 { right: 66.66666667%; } .col-sm-pull-7 { right: 58.33333333%; } .col-sm-pull-6 { right: 50%; } .col-sm-pull-5 { right: 41.66666667%; } .col-sm-pull-4 { right: 33.33333333%; } .col-sm-pull-3 { right: 25%; } .col-sm-pull-2 { right: 16.66666667%; } .col-sm-pull-1 { right: 8.33333333%; } .col-sm-pull-0 { right: auto; } .col-sm-push-12 { left: 100%; } .col-sm-push-11 { left: 91.66666667%; } .col-sm-push-10 { left: 83.33333333%; } .col-sm-push-9 { left: 75%; } .col-sm-push-8 { left: 66.66666667%; } .col-sm-push-7 { left: 58.33333333%; } .col-sm-push-6 { left: 50%; } .col-sm-push-5 { left: 41.66666667%; } .col-sm-push-4 { left: 33.33333333%; } .col-sm-push-3 { left: 25%; } .col-sm-push-2 { left: 16.66666667%; } .col-sm-push-1 { left: 8.33333333%; } .col-sm-push-0 { left: auto; } .col-sm-offset-12 { margin-left: 100%; } .col-sm-offset-11 { margin-left: 91.66666667%; } .col-sm-offset-10 { margin-left: 83.33333333%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-8 { margin-left: 66.66666667%; } .col-sm-offset-7 { margin-left: 58.33333333%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-5 { margin-left: 41.66666667%; } .col-sm-offset-4 { margin-left: 33.33333333%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-2 { margin-left: 16.66666667%; } .col-sm-offset-1 { margin-left: 8.33333333%; } .col-sm-offset-0 { margin-left: 0; } } @media (min-width: 992px) { .kontaktdaten_list { display: flex; flex-direction: row-reverse; } .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 { float: left; } .col-md-12 { width: 100%; padding-block-end: 1rem; } .col-md-11 { width: 91.66666667%; } .col-md-10 { width: 83.33333333%; } .col-md-9 { width: 75%; } .col-md-8 { width: 66.66666667%; } .col-md-7 { width: 58.33333333%; } .col-md-6 { width: 50%; } .col-md-5 { width: 41.66666667%; } .col-md-4 { width: 33.33333333%; } .col-md-3 { width: 25%; } .col-md-2 { width: 16.66666667%; } .col-md-1 { width: 8.33333333%; } .col-md-pull-12 { right: 100%; } .col-md-pull-11 { right: 91.66666667%; } .col-md-pull-10 { right: 83.33333333%; } .col-md-pull-9 { right: 75%; } .col-md-pull-8 { right: 66.66666667%; } .col-md-pull-7 { right: 58.33333333%; } .col-md-pull-6 { right: 50%; } .col-md-pull-5 { right: 41.66666667%; } .col-md-pull-4 { right: 33.33333333%; } .col-md-pull-3 { right: 25%; } .col-md-pull-2 { right: 16.66666667%; } .col-md-pull-1 { right: 8.33333333%; } .col-md-pull-0 { right: auto; } .col-md-push-12 { left: 100%; } .col-md-push-11 { left: 91.66666667%; } .col-md-push-10 { left: 83.33333333%; } .col-md-push-9 { left: 75%; } .col-md-push-8 { left: 66.66666667%; } .col-md-push-7 { left: 58.33333333%; } .col-md-push-6 { left: 50%; } .col-md-push-5 { left: 41.66666667%; } .col-md-push-4 { left: 33.33333333%; } .col-md-push-3 { left: 25%; } .col-md-push-2 { left: 16.66666667%; } .col-md-push-1 { left: 8.33333333%; } .col-md-push-0 { left: auto; } .col-md-offset-12 { margin-left: 100%; } .col-md-offset-11 { margin-left: 91.66666667%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-0 { margin-left: 0; } } @media (min-width: 1200px) { .area-2 { display: flex; flex-direction: column-reverse; } .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 { float: left; } .col-lg-12 { width: 100%; } .col-lg-11 { width: 91.66666667%; } .col-lg-10 { width: 83.33333333%; } .col-lg-9 { width: 75%; } .col-lg-8 { width: 66.66666667%; } .col-lg-7 { width: 58.33333333%; } .col-lg-6 { width: 50%; } .col-lg-5 { width: 41.66666667%; } .col-lg-4 { width: 33.33333333%; } .col-lg-3 { width: 25%; } .col-lg-2 { width: 16.66666667%; } .col-lg-1 { width: 8.33333333%; } .col-lg-pull-12 { right: 100%; } .col-lg-pull-11 { right: 91.66666667%; } .col-lg-pull-10 { right: 83.33333333%; } .col-lg-pull-9 { right: 75%; } .col-lg-pull-8 { right: 66.66666667%; } .col-lg-pull-7 { right: 58.33333333%; } .col-lg-pull-6 { right: 50%; } .col-lg-pull-5 { right: 41.66666667%; } .col-lg-pull-4 { right: 33.33333333%; } .col-lg-pull-3 { right: 25%; } .col-lg-pull-2 { right: 16.66666667%; } .col-lg-pull-1 { right: 8.33333333%; } .col-lg-pull-0 { right: auto; } .col-lg-push-12 { left: 100%; } .col-lg-push-11 { left: 91.66666667%; } .col-lg-push-10 { left: 83.33333333%; } .col-lg-push-9 { left: 75%; } .col-lg-push-8 { left: 66.66666667%; } .col-lg-push-7 { left: 58.33333333%; } .col-lg-push-6 { left: 50%; } .col-lg-push-5 { left: 41.66666667%; } .col-lg-push-4 { left: 33.33333333%; } .col-lg-push-3 { left: 25%; } .col-lg-push-2 { left: 16.66666667%; } .col-lg-push-1 { left: 8.33333333%; } .col-lg-push-0 { left: auto; } .col-lg-offset-12 { margin-left: 100%; } .col-lg-offset-11 { margin-left: 91.66666667%; } .col-lg-offset-10 { margin-left: 83.33333333%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-8 { margin-left: 66.66666667%; } .col-lg-offset-7 { margin-left: 58.33333333%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-5 { margin-left: 41.66666667%; } .col-lg-offset-4 { margin-left: 33.33333333%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-2 { margin-left: 16.66666667%; } .col-lg-offset-1 { margin-left: 8.33333333%; } .col-lg-offset-0 { margin-left: 0; } } @media (min-width: 1500px) { .container { /* max-width: 1450px; */ margin-left: 0; margin-right: auto; } .news.full_preview .container { max-width: 100%; } .news.full_preview .main-screen { padding-top: 0; } } body.login_area .login_button a { padding: 12px 24px 12px 48px; border: 1px solid var(--fc-primary); border-radius: 4px; background-image: url("/module/intranet/login_pic/microsoft.svg"); background-repeat: no-repeat; background-size: 20px 20px; background-position: 10px center; color: var(--fc-dark); } /* Jan Anpassungen */ body.dashboard { .news_dashboard { .collection_list.news { .collection_content.vorschaubild { width: 100%; } } .collection_list.news:nth-child(3) { .collection_content.vorschaubild { max-width: 350px; height: 250px; } } } } @media (width < 1700px) { body.dashboard { .news_dashboard { .collection_list.news { flex: 0 0 calc(50% - 15px); } .collection_list.news:nth-child(3) { flex: 0 0 calc(50% - 15px); .collection_container { flex-direction: column !important; } .collection_content.vorschaubild { max-width: unset; width: 100% !important; height: auto; } } } } } @media (width < 768px) { .dashboard .collection_list.news .collection_container { padding: unset; padding-bottom: 4rem; } body.dashboard { .news_dashboard { .collection_list.news { flex: 0 0 100% !important; } } } } @media (width < 991px) { body.betriebsrat { .news_dashboard { .collection_list.news { flex: 0 0 calc(50% - 10px) !important; } .collection_list.news:nth-child(1) { flex: 0 0 calc(50% - 15px); max-height: unset !important; height: 100%; .collection_container { padding-top: unset; flex-direction: column !important; height: unset !important; padding-left: unset !important; } .collection_content.vorschaubild { max-width: unset !important; } } } } } @media (width < 768px) { body.betriebsrat { .news_dashboard { .collection_list.news { flex: 0 0 100% !important; } } } } .collection_list.termine { border-top: 1px solid var(--border); } .date-group .date_title { padding-bottom: 20px; } .calendarButtun { position: absolute; top: 50%; right: 50px; transform: translateY(-50%); } .dashboard .calendarButtun { display: none; } .dashboard .collection_list.termine { width: 100%; border-top: 0; padding: 1rem; border-bottom: 1px solid var(--border); } .white_bg .textcontent { float: left; width: 100%; } .termine_headline_dashboard h3 { padding: 1rem !important; border-bottom: 1px solid var(--border); margin-bottom: 0; } .termine_dashboard { width: 100%; float: left; margin-bottom: 1rem; } .grid_knowledgecenter.no-categories .kc_category h3.kc_title { margin-top: 1rem; font-size: inherit; font-weight: inherit; position: relative; } .grid_knowledgecenter.no-categories h3.kc_title:after { width: 11px; height: 11px; position: absolute; cursor: pointer; background: transparent !important; border-top: 1px solid var(--border); border-left: 1px solid var(--border); content: ""; top: 7px; right: 1rem; rotate: 135deg; } .grid_knowledgecenter.no-categories { grid-template-columns: 1fr; gap: 0; } .grid_knowledgecenter.no-categories .kc_category { border-radius: 0; border-bottom: 0; } .grid_knowledgecenter.no-categories .kc_category p.kc_tags, .grid_knowledgecenter.no-categories .kc_category img { display: none; } .dashboard .collection_content.termin_date { display: inline-block; margin-right: 10px; } .dashboard .collection_content.time { display: inline-block; } .dashboard .white_bg .collection_list.termine h3 { padding-left: 0; font-size: inherit; } @media (width < 485px) { .calendarButtun { position: relative; margin-top: 10px; top: unset; right: unset; transform: unset; } } /* Jan Anpassungen End */ #pdf-preview { margin-top: 20px; embed#pdf-viewer { height: unset; height: 720px; } } .knowledgecenter-post.full_preview .content_left.col-sm-12.col-md-12.col-lg-8 { display: flex; flex-direction: column; } .collection_content.video { grid-area: left; margin-top: 1rem; } .collection_content.video video { width: 100%; height: auto; display: block; border-radius: 10px; }