/*
	Theme Name: SWOB Online
	Description: Für den Kunden angepasstes Theme
	Version: 1.0.0
	Author: COM.POSiTUM
	Author URI: https://compositum.de
*/

/*
  Es muss kein Child-Theme erstellt werden.
  Der Name "SWOB Online" kann auf den Namen des Kunden geändert werden.
  Die Beschreibung ist natürlich auch zu ändern.
  Dieser Kommentar kann anschließend gelöscht werden.
*/

/*
  Das Logo, Favicon und Startseiten-Hintergrundbild können im Backend
  gepflegt werden  unter Design -> Customizer.
*/

/*------------------------------------*\
    COLORS
\*------------------------------------*/

/*
  Die Farben sind vor Onlinegang im ganzen Dokument zu ersetzen.
*/

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
    font-style: italic;
    font-display: swap;
}

:root {
    --primary-rgb: 0, 75, 124;
    --primary: rgb(var(--primary-rgb));
    --secondary-rgb: 253, 196, 0;
    --secondary: rgb(var(--secondary-rgb));
    --white: #ffffff;
    --lightgrey: #fbfbfb;
    --darkgrey: #3b3b3b;
    --page-content-width: 1364px;

    --yellow1: #ffedc2;
    --yellow2: #ffe194;
    --yellow3: #fff3d7;

    --padding: 14rem;
    --padding: calc(100vw / 1920 * 140);
    --gap: 1.6rem;
    --column: calc((100vw - var(--padding) * 2 - var(--gap) * 11) / 12);
    --box-shadow: 0 0 var(--gap) rgba(0, 0, 0, 0.1);
    --transition: 0.3s ease all;
    --stroke: 3px;
    --site-stroke: 30px;
    --content-padding: calc((var(--padding) + var(--gap)) / 2);
    --y-padding: 8rem;
    --small-y-padding: 5rem;
    --mobile-padding: var(--padding);
}

@media screen and (max-width: 769px) {
    :root {
        --padding: 2rem;
        --gap: 1rem;
        --column: calc((100vw - var(--padding) * 2 - var(--gap) * 3) / 4);
        --mobile-padding: calc(var(--padding) + 2rem);
    }
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--white);
}

::-webkit-scrollbar-thumb {
    background: var(--secondary);
}

html {
    color: var(--primary);
    font-size: 10px;
    font-family: 'Montserrat', sans-serif;
    background-image: linear-gradient(90deg, #e6e6e6, #ffffff, #e6e6e6),
        url('img/background.jpg');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.55rem;
    line-height: 1.6;
}
a:hover {
    color: var(--secondary);
}

.bg-white {
    background-color: var(--white);
    position: relative;
    box-shadow: var(--box-shadow);
}

.bg-grey {
    background-color: var(--lightgrey);
    position: relative;
}

h2.wp_core_block,
.headline {
    font-size: 3.2rem;
    position: relative;
}

h2.wp_core_block:not(.no-border):after,
.headline:not(.no-border):after {
    content: '';
    background-color: var(--secondary);
    height: var(--stroke);
    width: 20rem;
    max-width: 100%;
    display: block;
    margin-top: 0.7rem;
}

h2.wp_core_block.center:after,
.headline.center:after {
    margin-left: auto;
    margin-right: auto;
}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

.home .wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.wrapper > * {
    width: 100%;
    display: inline-block;
}

main,
.wrapper > main,
main > *,
section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    flex-grow: 1;
}

section > article:only-of-type {
    flex-grow: 1;
}

main,
main article,
.wp_core_block {
    position: relative;
}

.bg-grey:after,
.bg-white:after,
.home main:after,
main article:after,
.wp_core_block:before {
    content: '';
    width: var(--site-stroke);
    height: 100%;
    background-color: var(--yellow2);
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    /* mix-blend-mode: multiply; */
}

.bg-grey:after,
.bg-white:after {
    z-index: 1;
    background-color: var(--yellow1);
}

.bg-grey:nth-of-type(even):after,
.bg-white:nth-of-type(even):after {
    background-color: var(--yellow3);
}

.block-padding {
    padding: var(--y-padding) calc(var(--padding) + var(--gap) + var(--column));
}

.content-padding {
    /* padding: 0 calc(var(--padding) + var(--gap) + var(--column)); */
    padding: 0 calc(var(--gap) + var(--column));
}

header {
    background-color: var(--white);
    padding: 2rem var(--padding);
    position: sticky;
    top: 0;
    z-index: 99;
    box-shadow: var(--box-shadow);
}

header .logo {
    padding-left: calc(var(--column) + var(--gap));
}

footer {
    background-color: var(--primary);
    color: var(--white);
    padding: 5rem calc(100vw / 12);
}

aside form {
    max-width: 30rem;
    display: flex;
    margin-left: auto;
}

.logo a {
    display: block;
    margin: 0;
    width: auto;
    max-width: 16rem;
}

.logo img {
    max-width: 16rem;
    max-height: 4.5rem;
    object-fit: contain;
    object-position: left center;
}

section {
    /* padding: 3rem calc(100vw / 12); */
    position: relative;
}
video {
    max-width: 100%;
}

section#intro {
    display: flex;
    text-align: center;
    color: var(--primary);
}

section#intro h1,
section#intro h2 {
    margin: 0;
}

article:not(:last-child) {
    margin-bottom: 1rem;
}

article.page .wp-block-heading {
    /* text-align: left;
  padding: 4rem 0 1rem 0; */
}

@media (min-width: 769px) {
    .text-image[data-type='contact'][data-overlapping='1'] + .block-heading {
        padding-top: 0;
    }
}

.page_thumbnail {
    width: 100%;
    height: 25vh;
}

.breadcrumb {
    width: 100%;
    padding: 1rem calc(100vw / 12);
    justify-content: flex-start;
}

.breadcrumb a {
    margin-right: 1rem;
    color: var(--secondary);
}

.wp-block-gallery {
    margin: 2rem 0;
}

.post_list {
    align-items: flex-start;
}

.post_details:not(:first-child) {
    padding-left: 3rem;
}

.post_list h2 {
    margin-top: 0;
}

.button {
    position: relative;
    color: var(--primary);
    font-weight: 700;
    border: 0.2rem solid var(--primary);
    display: inline-block;
    padding: 1.2rem 4rem;
    margin: 0;
    border-top-right-radius: 2rem;
    cursor: pointer;
    transition: var(--transition);
    line-height: 1.2;
    background-color: var(--white);
    outline: 1px solid var(--white);
}
.button::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    border: inherit;
    border-top-right-radius: inherit;
    border-color: var(--secondary);
    border-left: 0;
    border-bottom: 0;
    transition: var(--transition);
    transform: translate(0.2rem, -0.2rem);
    background: inherit;
}

.button:hover {
    color: inherit;
    border-color: var(--secondary);
    transition: var(--transition);
    transform: translateX(3px);
}

.button:hover:after {
    border-color: var(--primary);
}

.full-vp {
    min-height: 100vh;
}

.scroll-down {
    position: absolute;
    display: block;
    left: 50%;
    bottom: 5%;
    transform: translate(-50%, -50%);
    background-image: url(img/arrow-down-black.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 4rem;
    height: 2rem;
    cursor: pointer;
}

/*------------------------------------*\
    CONTEACT FORM
\*------------------------------------*/

form {
    max-width: 80rem;
}

form .col {
    justify-content: flex-start;
}

fieldset {
    border: none;
    margin: 0;
    padding: 0;
    margin-bottom: 1rem;
}

form fieldset > span:first-of-type {
    min-width: 25%;
    padding-right: 2rem;
}

form fieldset > span:last-of-type {
    flex-grow: 1;
}

.data-security {
    display: inline;
}

.data-security input {
    width: auto;
}

.data-security + p {
    display: inline-block;
}

.data-security .wpcf7-list-item {
    margin: 0;
}

input[type='submit'] {
    width: auto;
    display: block;
    margin: 1rem auto;
}

/*------------------------------------*\
    CUSTOM STYLES
\*------------------------------------*/
/* .wp-block-heading, */
section > h1 {
    margin: 0;
    text-align: center;
    padding: var(--small-y-padding) var(--padding);
    font-size: 3.2rem;
    z-index: 1;
}

/* contact form 7 */

.wp-block-contact-form-7-contact-form-selector {
    /* background-color: #ffffff; */
    padding: var(--gap) calc(var(--padding) + var(--gap) + var(--column));
}
.wp-block-contact-form-7-contact-form-selector .wpcf7 {
    padding: calc(var(--column) / 2);
    background: #fff;
}

.wp-block-contact-form-7-contact-form-selector .wpcf7 .form-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2em calc(var(--column) / 2);
    width: 100%;
}

.wpcf7-spinner {
    display: none;
}

.wp-block-contact-form-7-contact-form-selector .wpcf7 .grid-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: calc(var(--column) / 2);
    align-items: flex-end;
    width: 100%;
}
/* 
.wp-block-contact-form-7-contact-form-selector .wpcf7 .form-content .
max-width: calc(var(--column)* 7); */

.text-content {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    align-items: flex-start;
}

.wp_core_block {
    padding: 0.5em calc(var(--padding) + var(--column) + var(--gap));
    margin: 0;
    width: 100%;
    background-color: var(--white);
    max-width: none;
    padding-bottom: var(--small-y-padding);
}

h2.wp_core_block {
    padding: 2em calc(var(--padding) + var(--column) + var(--gap))
        calc(1em + var(--small-y-padding));
}

ul.wp_core_block {
    margin-bottom: 1em;
}

h3.wp_core_block,
h4.wp_core_block {
    padding-top: 0.5em;
}

:not(.wp_core_block) + .wp_core_block,
.wp_core_block:first-child {
    padding-top: var(--small-y-padding);
}

.wp_core_block:last-child {
    padding-bottom: var(--small-y-padding);
}

.wp_core_block + .wp_core_block {
    margin-top: calc(0px - var(--small-y-padding));
}

.wp_core_block:before {
    z-index: 1;
    background-color: var(--yellow1);
}

#gender-info {
    margin-right: auto;
}

/* CF7 hidden */
input[name='form_job_specialties'],
input[name='form_job_title'] {
    display: none;
}

script {
    display: none !important;
}

.wp_core_block.text-content.job_contact {
    margin: var(--small-y-padding)
        calc(var(--padding) + var(--column) + var(--gap));
    padding: var(--small-y-padding);
    width: auto;
}

.wp_core_block.text-content.job_contact .headline {
    margin-bottom: 1em;
}

main.type-jobs ul.wp_core_block li {
    box-shadow: none;
    padding-top: 0;
    padding-bottom: 0;
}

main.type-jobs ul.wp_core_block {
    padding-top: 1em;
    margin-bottom: 1em;
}

:where(.wp-block-columns.is-layout-flex) {
    gap: var(--padding);
}

.wp_core_block.wp-block-columns::before,
.wp_core_block.wp-block-column::before {
    content: none;
}

.wp_core_block.wp-block-column {
    padding: 0;
    background: none;
}

.wp_core_block.wp-block-columns {
    padding: var(--small-y-padding) var(--padding);
    background: none;
}

.wp_core_block.wp-block-column + .wp_core_block.wp-block-column {
    margin-top: 0;
}

.wp_core_block.wp-block-column > * {
    padding: 0;
}

.wp_core_block.wp-block-column > * + * {
    margin-top: var(--small-y-padding) !important;
}

.wp_core_block.wp-block-column > * > .content {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1380px) {
    .wp_core_block.wp-block-columns {
        padding-left: var(--mobile-padding) !important;
        padding-right: var(--mobile-padding) !important;
    }
    .wp_core_block.wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .wp_core_block.wp-block-column > * + * {
        margin-top: var(--padding) !important;
    }
}

.wpcf7-form-control-wrap[data-name='acceptance-103'] .wpcf7-list-item {
    padding-right: 1em;
    margin-left: 0;
    width: fit-content;
}

#wpcf7-f5-p145-o2 .wpcf7-form .button {
    margin-top: 1em;
}

[data-name="acceptance-103"] input,
[data-name="acceptance-103"] {
    width: auto !important;
}

[data-name="acceptance-103"] label {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

[target="_blank"]:not([href*="swob-online"]):not([href*="tel:"]):not([href*="mailto:"]):not(.social_media):after,
html[lang="en-us"] [target="_blank"]:not([href*="swob-online"]):not([href*="tel:"]):not([href*="mailto:"]):after {
    content: url(img/external_link.gif);
    margin-left: 3px;
    margin-right: 3px;
}
.social_media_text_information span {
    word-break: break-all;
}
html[lang="en-us"] .social_media_text_information {
    display: none;
}