/* Version: März 2023 / Creator: 400 */ /* --- Normal --- */ @font-face { font-family: "Cormorant Garamond"; src: url('https://fonts.pwrk.dev/ofl/cormorantgaramond/CormorantGaramond[wght].woff2') format('woff2') ; font-weight: 300, 400, 500, 600, 700, 800, 900; font-style: normal; } /* --- Italic --- */ @font-face { font-family: "Cormorant Garamond"; src: url('https://fonts.pwrk.dev/ofl/cormorantgaramond/CormorantGaramond-Italic[wght].woff2') format('woff2') ; font-weight: 300, 400, 500, 600, 700, 800, 900; font-style: italic; } @font-face { font-family: "Roboto"; src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto[wdth,wght].woff2') format('woff2'); font-weight: 100; font-style: normal; } @font-face { font-family: "Roboto"; src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto[wdth,wght].woff2') format('woff2'); font-weight: 200; font-style: normal; } @font-face { font-family: "Roboto"; src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto[wdth,wght].woff2') format('woff2'); font-weight: 300; font-style: normal; } @font-face { font-family: "Roboto"; src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto[wdth,wght].woff2') format('woff2'); font-weight: 400; font-style: normal; } @font-face { font-family: "Roboto"; src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto[wdth,wght].woff2') format('woff2'); font-weight: 500; font-style: normal; } @font-face { font-family: "Roboto"; src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto[wdth,wght].woff2') format('woff2'); font-weight: 600; font-style: normal; } @font-face { font-family: "Roboto"; src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto[wdth,wght].woff2') format('woff2'); font-weight: 700; font-style: normal; } @font-face { font-family: "Roboto"; src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto[wdth,wght].woff2') format('woff2'); font-weight: 800; font-style: normal; } @font-face { font-family: "Roboto"; src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto[wdth,wght].woff2') format('woff2'); font-weight: 900; font-style: normal; } @font-face { font-family: "Roboto"; src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto-Italic[wdth,wght].woff2') format('woff2'); font-weight: 300; font-style: italic; } @font-face { font-family: "Roboto"; src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto-Italic[wdth,wght].woff2') format('woff2'); font-weight: 400; font-style: italic; } @font-face { font-family: "Roboto"; src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto-Italic[wdth,wght].woff2') format('woff2'); font-weight: 500; font-style: italic; } @font-face { font-family: "Roboto"; src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto-Italic[wdth,wght].woff2') format('woff2'); font-weight: 600; font-style: italic; } @font-face { font-family: "Roboto"; src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto-Italic[wdth,wght].woff2') format('woff2'); font-weight: 700; font-style: italic; } @font-face { font-family: "Roboto"; src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto-Italic[wdth,wght].woff2') format('woff2'); font-weight: 800; font-style: italic; } @font-face { font-family: "Roboto"; src: url('https://fonts.pwrk.dev/ofl/roboto/Roboto-Italic[wdth,wght].woff2') format('woff2'); font-weight: 900; font-style: italic; } /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { -webkit-text-size-adjust: 100%; /* 2 */ } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Roboto', sans-serif; font-size: 100%; color: #222; text-decoration: none; font-weight: normal; word-spacing: normal; line-height: 1.5; background-color: #d0d0d0; /* Hintergrundbilder werden in Chrome mit ausgedruckt */ -webkit-print-color-adjust:exact; } .frame-outer { position: relative; width: 780px; /* maximale Breite: 782px */ margin: 1.3rem auto; background-color: #F8F7F6; font-size: 0.8rem; /* minimale Schriftgröße 0.6rem */ } .frame-outer::after { content: ""; display: block; clear: both; } /*--für Titel--*/ h1 {font-family: 'Cormorant Garamond', sans-serif; margin: 0 0 0.625rem 0; font-size: 1.5rem; font-weight: 600; line-height: normal; } h1 span { font-size: 1rem; } /*--für Untertitel (Vollzeit, Teilzeit/Standort)--*/ h2 {font-family: 'Cormorant Garamond', sans-serif; margin: 0; font-size: 1rem; font-weight: 500; } /*--für Überschiften--*/ h3 { font-family: 'Cormorant Garamond', sans-serif; margin: 0; padding-bottom: 0.625rem; font-size: 1.2rem; font-weight:600; color: #E50010; } h6 { font-family: 'Cormorant Garamond', sans-serif; margin: 0; font-size: 3rem; font-weight: 600; } /*--für kleine/unter Überschiften--*/ h4 { margin: 0; font-size: 1rem; font-weight: 600; } .logoheader{ position: absolute; left: 2.5rem; top: 2.5rem;} .logoheader img{ width: 5rem;} #logo {margin-bottom: 1rem; } #logo img { width: 5rem;} #header { position: relative; } .facts { display: flex; display: -ms-flexbox; display: -webkit-flex; -webkit-justify-content: space-between; justify-content: space-between; /*align-items: flex-start;*/ flex-direction: row; flex-wrap: wrap; } .factsleft{ width:35%; padding: 0 2.5rem 0 2.5rem;} .factsright{ width: 65%; margin: auto 0; padding: 0 2.5rem 0 0;} .content { position: relative; padding: 2.5rem ; } .content::after { content: ""; display: block; clear: both; } .content2 { position: relative; padding: 0 2.5rem 2.5rem 2.5rem ; } /*--für Stellentitel--*/ #title { position: relative; padding: 1.5rem 5%; } #footer { position: relative; padding: 1.5rem 5%; } #footer::after { content: ""; display: block; clear: both; } .inclusion{ padding: 2.5rem; background-color: #969691;} /*--Flex--*/ .bgbild { background-repeat: no-repeat; background-size: cover; background-position: center; } .flex { display: flex; display: -ms-flexbox; display: -webkit-flex; -webkit-justify-content: space-between; justify-content: space-between; /*align-items: flex-start;*/ flex-direction: row; flex-wrap: wrap; margin: 0 2.5rem 2.5rem 2.5rem; } .left {border: 1px solid #d0d0d0; border-radius: 2px; padding: 1.25rem; width: 48%; transition: all 340ms ease 0s; -moz-transition: all 340ms ease 0s; -webkit-transition: all 340ms ease 0s; margin: 0 0 2.5rem 0; } .right {margin: 0 0 2.5rem 0; transition: all 340ms ease 0s; -moz-transition: all 340ms ease 0s; -webkit-transition: all 340ms ease 0s; border: 1px solid #d0d0d0; border-radius: 2px; padding: 1.25rem; width: 48%; } .right:hover{ border: 1px solid #E50010; } .benefits { transition: all 340ms ease 0s; -moz-transition: all 340ms ease 0s; -webkit-transition: all 340ms ease 0s; border: 1px solid #d0d0d0; border-radius: 2px; padding: 1.25rem; margin: auto; } .benefits:hover{ border: 1px solid #E50010; margin:-1.25rem -1.25rem 2.45rem -1.25rem;} .left:hover{ border: 1px solid #E50010; } /*--Float--*/ .box-left { float: left; width: 48%; } .box-right { float: right; width: 48%; } .clear { clear: both; font-size: 0; line-height: 0; } /*--Links - bitte für unterschiedliche Hintergründe farblich anpassen!--*/ a:link, a:visited, a:active { text-decoration: none; color: #222; } a:hover { text-decoration: none; color: #E50010; } /*--Listen--*/ ul { margin: 0; list-style-type: none; } li { position: relative; margin: auto; padding: 0 0 0.625rem 1rem; } li:last-child { padding-bottom: 0; } li::before { position: absolute; top: 0; left: 0; content: "•"; font-size: 0.8rem; color: #E50010; } /*--Eingrückte Listenpunkte--*/ li ul{ margin: 0 0 0 0; padding: 0 0 0 1rem; } /*--Button--*/ .button_box { text-align: center; } .button_box::after { clear: both; content: ""; display: block; } .button a { display: inline-block; background: #000; padding: 0.6rem 2rem 0.6rem 2rem; margin: 0.4rem 0.2rem 1rem 0.2rem; cursor: pointer; text-transform: uppercase; transition: all 140ms ease 0s; -moz-transition: all 140ms ease 0s; -webkit-transition: all 140ms ease 0s; color: #f8f7f6; } .button a:hover { margin: 0.2rem -0.2rem 0.8rem -0.2rem; padding: 0.8rem 2.2rem 0.8rem 2.2rem; background-color: #646464; text-decoration: none; color: #f8f7f6; } /*--Slider editierbar--*/ .slider-wrap { max-width: 800px; width: auto; height: auto; position: relative; margin: 0; overflow: hidden; } .slider-wrap img { display: block; } .slideshow { position: absolute; width: 100%; top: 0px; left: 0px; z-index: 0; } .slideshow li span { width: 100%; position: absolute; top: 0px; left: 0px; color: transparent; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: image 24s linear infinite; animation: image 24s linear infinite; } @keyframes image { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 5% { opacity: 1; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes image { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 5% { opacity: 1; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } } .slideshow li { margin:0; padding:0; list-style: none; } .slideshow li:nth-child(1) span {} .slideshow li:nth-child(2) span { -webkit-animation-delay: 6s; animation-delay: 6s; } .slideshow li:nth-child(3) span { -webkit-animation-delay: 12s; animation-delay: 12s; } .slideshow li:nth-child(4) span { -webkit-animation-delay: 18s; animation-delay: 18s; } ul.slideshow { margin: 0; padding-left: 0; } .slideshow li::before { display: none; } /*--Angaben Bilder, Video, etc.--*/ iframe { display: block; width: 100%; } .video-wrapper iframe, .video-wrapper object, .video-wrapper embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } img { display: block; max-width: 100%; height: auto; width: auto; border: 0; } .imgcenter{ display: inline-block; } strong { font-weight: 700; } p { margin:0 0 0.625rem 0; } p:last-child{ margin: 0;} p:empty { height: 1rem; } .hide_m {} .hide { display: none; } .refnr {} .apply {}