@import url("https://use.typekit.net/kjw1evo.css");

:root {
    --primary: #d40037;
    --primaryHover: #7f0021;
    --secondary: #DEC691;
    --textcolor: #242424;
    --darkgrey:#272727;
}
body {
    margin: 0 auto;
    font-family:'Europa', sans-serif;
}

h1, h2, h3 {
    margin: 0;
    padding: 0;
    position: relative;
}
h2 {
    font-size:42px;
    font-weight: 500;
}
.titlePattern {
    padding-top:24px;
}
.titlePattern:before {
    width: 100px;
    height: 1px;
    background-color:black;
    content:"";
    top:0;
    left:0;
    position: absolute;
}
.pageInner {
    max-width: 1060px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    height: 100%;
}
.pageInnerWither {
    max-width: 1170px;
}
.button {
    background-color: var(--primary);
    color: white;
    border: none;
    height: 51px;
    padding:0 20px;
    display: inline-flex;
    gap:10px;
    align-items: center;
    justify-content: space-between;
    letter-spacing:  1px;
    font-weight: bolder;
    cursor: pointer;
    font-size: 20px;
    text-decoration: none;
    border-radius: 64px;
    transition: background .3s ease;
}
.button:hover {
    background-color:var(--primaryHover);
}
/*
** Header
 */
header {
    width: 100%;
    height: 83px;
    background-color: black;
}
#printlogo {
    display: none;
}
.headerInner {
    max-width: 1170px;
    width: 100%;
    margin:0 auto;
    display: flex;
    height: 83px;
    justify-content: space-between;
    align-items: center;
}

/*
** Header Image - Teaser
 */
#headerImage {
    height: 500px;
    background-color:#efefef;
    margin:0;
    position: relative;
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
}
.teaserElement {
    background-color:black;
    color:white;
    width: 588px;
    position: absolute;
    left:0;
    bottom:-54px;
    padding:56px 64px 88px 56px;
    border-radius: 0 0 256px 0;
    box-shadow:0 0 20px 0 rgba(0,0,0,0.3);
    max-width: 90%;
    box-sizing: border-box;
}
.teaserElement h2 {
    font-size: 35px;
    font-weight: bolder;
    line-height: 160%;
}
.teaserElement p {
    font-size:20px;
    line-height: 30px;
}
/*
** Title Area
 */
h1 {
    font-size:60px;
    font-weight: bolder;
}
#jobTitleArea {
    margin-top:120px;
}
#jobMetaInfos {
    display: flex;
    gap:32px;
    margin-top:24px;
    flex-wrap: wrap;
}
.jobMetaElement {
    display:flex;
    align-items: center;
    gap:16px;
    font-size: 20px;
}
.jobMetaIcon {
    box-sizing: border-box;
    width:68px;
    height:36px;
    display: flex;
    padding:0 16px;
    align-items: center;
    margin-right:8px;
    background-color:var(--primary);
    border-radius: 0 0 180px 0;
}
/*
** Job Intro
 */
#jobIntroText {
    margin-bottom:80px;
}
#jobIntroText p {
    padding-top:40px;
    font-size:30px;
    font-weight: 500;
    line-height: 42px;
}
/*
** Aufgaben Profil
 */
#aufgabenProfil {
    background-color:var(--secondary);
    padding:80px 0;
    margin:0;
    margin-top:64px;
}
#aufgabenProfil h2 {
    font-size:42px;
    font-weight: 500;
    margin-bottom:40px;
}

#aufgabenProfil .pageInner {
    display: grid;
    grid-template-columns: 50% 50%;
    gap:80px;
}
#aufgabenProfil .pageInner ul {
    padding:0 0 0 20px;
    gap:20px;
    display: flex;
    flex-direction: column;
}
#aufgabenProfil .pageInner ul li {
    list-style-image: url('data:image/svg+xml;utf8,<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.9088 0.387755C13.173 0.136297 13.5244-0.00271898 13.8891 4.03038e-05C14.2538 0.00279959 14.6031 0.147119 14.8634 0.402545C15.1237 0.657971 15.2746 1.00453 15.2842 1.36908C15.2939 1.73364 15.1615 2.08768 14.9151 2.35651L7.43383 11.7128C7.30519 11.8513 7.14992 11.9625 6.97733 12.0397C6.80473 12.1169 6.61834 12.1585 6.4293 12.162C6.24026 12.1655 6.05246 12.1308 5.87712 12.0601C5.70178 11.9893 5.54251 11.884 5.40883 11.7503L0.447578 6.78901C0.309415 6.66026 0.198599 6.50501 0.121739 6.33251C0.0448791 6.16002 0.00355032 5.9738 0.00021885 5.78499C-0.00311262 5.59617 0.0316215 5.40861 0.102348 5.23351C0.173075 5.05841 0.278346 4.89934 0.411882 4.76581C0.545417 4.63227 0.70448 4.527 0.879583 4.45628C1.05469 4.38555 1.24224 4.35081 1.43106 4.35415C1.61988 4.35748 1.80609 4.39881 1.97859 4.47567C2.15109 4.55253 2.30634 4.66334 2.43508 4.80151L6.36133 8.72588L12.8732 0.429006L12.9088 0.387755Z" fill="%23d40037"/></svg>');
    font-size: 20px;
    line-height: 30px;
    padding-left:16px;
}
/*
** Benefits
 */
#benefits {
    background-color:black;
    padding:80px 0;
}
#benefits h2 {
    color:white;
}
#benefits  .titlePattern:before {
    background-color:white;
}
#benefitsHolder {
    display: grid;
    grid-template-columns: 50% 50%;
    gap:40px;
    margin-top:40px;
}
.benefit {
    color: white;
    perspective: 1000px;
    height: 250px;
}

.benefitInner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.benefit:hover .benefitInner {
    transform: rotateY(180deg);
}

.benefitFront,
.benefitBack {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.benefitFront {
    background-color: var(--darkgrey);
    padding: 32px;
    box-sizing: border-box;
    display: flex;
    gap:20px;
    flex-direction: column;
    justify-content: center;
}
.benefitFront img {
    width: 96px;
    height: 96px;
}
.benefitBack {
    background-color: var(--primary);
    padding: 32px;
    transform: rotateY(180deg);
    box-sizing: border-box;
    display: flex;
    gap:10px;
    flex-direction: column;
    justify-content: center;
}

.benefitBack img {
    width: 48px;
    height: 48px;
}
.benefitTextBack p {
    font-size: 20px;
    line-height: 28px;
}
.benefitIconBack  svg {
    width: 48px;
    height: 48px;
}
.benefitTitle h3 {
    font-size:32px;
}
.benefitTitle h3 p {
    display: none;
}
.benefitTextBack b {
    font-size:24px;
}
.mobileOnly.benefitArrow {
    position: absolute;
    right: 30px;
    bottom: 30px;
    display: none;
}
.mobileOnly.benefitArrow svg {
    width: 34px;
    height: 34px;
}
/*
** Video Area
 */
#bgVideoArea {
    width: 100%;
}
#bgVideoArea video {
    width: 100%;
    object-fit: cover;
    height: 700px;
}
/*
** About Quickline
 */
#aboutQuickline {
    margin-top: 128px;
    margin-bottom: 80px;
}
#aboutText p {
    font-size:20px;
    line-height: 30px;
}
#aboutFacts {
    display: flex;
    justify-content: space-between;
    margin-bottom: 64px;
    margin-top:104px;
}
#aboutFacts .factsElement {
    display: flex;
    flex-direction: column;
    gap:10px;
    align-items: center;
}
#aboutFacts .factsNumber {
    font-size: 60px;
    font-weight: bolder;
    color: var(--primary);
    text-align: center;
}
#aboutFacts .factsTitle h3 {
    font-size: 30px;
    text-align: center;
    font-weight: 500;
}
.solidButton {
    text-decoration: none;
    color:black;
    display: inline-flex;
    align-items: center;
    gap:16px;
    padding-bottom: 4px;
    font-weight: 600;
    position: relative;
    font-size: 20px;
}
.solidButton:after {
    animation-duration: 1s;
    background-color: var(--primary);
    bottom: 0;
    content: "";
    height: 1px;
    position: absolute;
    width: 100%;
}
.solidButton:hover:after {
    animation-name: shrink-and-grow;
}
@keyframes shrink-and-grow {
    0% {
        width: 100%
    }

    50% {
        width: 0
    }

    to {
        width: 100%
    }
}
/*
** Contact
 */
#contact {
    background-color:var(--secondary);
    padding:80px 0;
}
#contact .pageInner {
    display:flex;
    gap:24px;
    flex-direction: column;
}
#contact .pageInner h2 {
    width: 100%;
}
#contactHolder {
    display: grid;
    grid-template-columns: calc(50% - 40px) calc(50% - 40px);
    gap:80px;
}
#contactLeft {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap:24px;
}
#contactLeft h3 {
    font-weight: 500;
    font-size: 30px;
    line-height: 42px;
}
#contactRight {
    position: relative;
    display: flex;
    flex-direction: column;
}
#buttonPhoneMobile, #buttonEmailMobile {
    display: none;
}
#contactRight #contactName {
    font-size: 20px;
    font-weight: 400;
}
#contactRight #contactName b {
    font-size: 23px;
    font-weight: 900;
    margin-bottom: -15px;
    display: block;
}
#contactImage {
    background-color:lightgray;
    width: 492px;
    height: 275px;
    position: absolute;
    border-radius: 0 0 180px 0;
    bottom:-140px;
}
/*
** Apply Teaser
 */
#applyTeaser {
    background-color:black;
    color:white;
    padding:156px 0 176px 0;
    background-image: url('data:image/svg+xml;utf8,<svg width="260" height="380" viewBox="0 0 260 380" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 379.354C32.8714 379.354 63.966 371.035 91.0223 355.394C100.337 360.643 107.175 364.493 115.198 368.074C132.966 376.016 151.515 380 170.064 380C182.287 380 194.536 378.277 206.57 374.777C230.908 367.697 242.565 362.097 254.249 355.986C254.518 355.851 255.083 355.474 255.083 355.474C257.452 353.994 259.041 351.328 259.041 348.34C259.041 343.71 255.272 339.94 250.641 339.94C249.86 339.94 249.107 340.075 248.38 340.29C248.326 340.29 244.261 341.475 244.261 341.475C233.923 344.544 232.846 344.867 223.666 347.048C198.332 353.105 170.145 348.044 148.258 333.533C141.258 328.876 136.87 325.403 132.751 321.822C164.761 286.878 182.341 240.088 182.341 189.663C182.341 139.239 163.98 90.6185 130.651 55.4049C96.7566 19.6798 50.3705 0 0 0V49.9398C75.7846 49.9398 130.786 108.71 130.786 189.663C130.786 270.617 75.7846 329.387 0 329.387V379.327V379.354Z" fill="%23D40037"/></svg>');
    background-repeat: no-repeat;
    background-position: left center;
}

#applyTeaser  .titlePattern:before {
    background-color:white;
    left:inherit;
}
#applyTeaser .pageInner {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    gap:80px;
}
#applyTeaser h2 {
    font-size: 60px;
    font-weight: 500;
    line-height: 76px;
    max-width: 840px;
}
#personalVermittler {
    font-size: 20px;
}
/*
** Footer
 */
footer {
    background-color:var(--darkgrey);
    display: flex;
    height: 68px;
}
footer .footerInner {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1170px;
    margin:0 auto;
    color:white;
    height: 68px;
    align-items: center;
}
footer ul {
    list-style:none;
    display: flex;
}
#footerFollow {
    display: flex;
    align-items: center;
}
#footerFollow h2 {
    font-weight: normal;
    font-size: 20px;
}
#footerFollow ul {
    gap:8px;
    padding-left:8px;
}
#footerPrint {
    cursor:pointer;
}
#footerFollow ul li {
    display: flex;
    align-items: center;
}
#footerFollow ul li a {
    display: flex;
    align-items: center;
}
#footerPrintShare ul {
    gap:24px;
}
footer a {
    text-decoration: none;
    color:white;
    font-size: 16px;
    padding:0 10px;
}
#footerShare {
    position:relative;
}
ul#shareAreaFooter {
    background-color:var(--primary);
    padding:10px 20px 10px 20px;
    position: absolute;
    top:-40px;
    border-radius: 20px;
    display: none;
    gap:10px;
    align-items: center;
}
#footerShare:hover #shareAreaFooter {
    display: flex;
}
.copyLink {
    cursor:pointer;
}
/*
** Modal
 */

dialog {
    padding:0;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    width: 980px;
    max-width: 80%;
    border-radius: 0 0 280px 0;
}
dialog#mapModal iframe {
    aspect-ratio: 16 / 9;
}
/* Hintergrund (Overlay) */
dialog::backdrop {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(3px); /* Optional: macht den Hintergrund unscharf */
}
#closeModal svg {
    position: absolute;
    right: 0;
    top:0;
    padding:0;
    width: 60px;
    height: 60px;
    background-color:var(--secondary);
    border-radius: 0 0 0 20px;
    cursor: pointer;
    z-index: 9999;
}
#map {
    width: 100%;
    aspect-ratio: 16 / 9;
}
#openModal {
    cursor: pointer;
}
#openModal .solidButton {
    font-weight: normal;
}
/* Macht das InfoWindow etwas moderner */
.gm-style .gm-style-iw-c {
    background-color: #ffffff; /* Hier könntest du #222 für dark nehmen */
    border-radius: 8px !important;
    padding: 0 !important;
}

.gm-style .gm-style-iw-d {
    overflow: hidden !important;
}

/* Den Schließen-Button anpassen */
.gm-ui-hover-effect {
    top: 2px !important;
    right: 2px !important;
}
.gm-style-iw-chr {
    position: absolute;
    right:-5px;
    top:-10px;
}

@media only screen and (max-width:1200px) {
    h1 {
        font-size:36px;
        line-height: 46px;
    }
    h2 {
        font-size:32px;
    }
    #jobIntroText p {
        font-size:20px;
    }
    #aufgabenProfil .pageInner {
        grid-template-columns: 100%;
    }
    #aufgabenProfil h2 {
        font-size:32px;
    }
    #benefitsHolder {
        grid-template-columns: 100%;
    }
    .benefitTitle h3 {
        font-size:30px;
    }
    .benefit {
        height: 320px;
    }
    .mobileOnly.benefitArrow {
        display: block;
    }
    #contactHolder {
        grid-template-columns: 100%;
        gap:40px;
    }
    .pageInner, .headerInner {
        padding:0 20px;
        box-sizing: border-box;
    }
    #bgVideoArea video {
        height: 248px;
    }
    #aboutQuickline {
        margin-top:230px;
    }
    #aboutFacts {
        flex-direction: column;
        gap:40px;
        margin-top:40px;
    }
    #aboutFacts .factsNumber {
        font-size:40px;
    }
    #aboutFacts .factsTitle h3 {
        font-size: 20px;
    }
    #contactLeft h3 {
        font-size:20px;
    }
    #contactRight {
        align-items:flex-start;
    }
    #contactImage {
        position:relative;
        bottom:0;
        margin-top:20px;
        width:100%;
        height: 219px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    #buttonPhone, #buttonEmail {
        display: none;
    }
    #buttonPhoneMobile, #buttonEmailMobile {
        display: inline-flex;
        margin-top:20px;
    }
    footer {
        height: auto;
    }
    footer .footerInner {
        height: auto;
        padding:20px;
        box-sizing: border-box;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #applyTeaser {
        background-size:17%;
        background-position:left 88px;
    }
    #applyTeaser h2 {
        font-size:32px;
        line-height: 42px;
    }
    .teaserElement {
        padding:40px 32px 40px 32px;
        max-width: 90%;
        box-sizing: border-box;
    }
    #bgVideoArea .teaserElement {
        bottom:-160px;
        padding:40px 32px 40px 32px;
        max-width: 90%;
        box-sizing: border-box;
    }
    #applyTeaser {
        padding: 88px 0;
    }
    #applyTeaser .pageInner {
        gap:40px;
    }
    .teaserElement h2 {
        font-size:24px;
    }
    footer ul li ,footer ul {
        padding:0;
        gap:20px;
    }
    #footerFollow ul {
        gap:20px;
    }
    footer a {
        padding:0;
    }
    ul#shareAreaFooter {
        right:0;
    }
    #personalVermittler {
        padding:0;
        margin:0;
    }
    .teaserElement p {
        font-size: 20px;
        line-height: 30px;
        hyphens: auto;
        width: 220px;
    }
    #jobIntroText p {
        line-height: 30px;
    }
}
/** Fix für Geringverdiener Auflösung **/
@media only screen and (max-width:429px) {
    .button {
        font-size:16px;
        height: 45px;
        padding:0 16px;
    }
}