@font-face {
    font-family: 'Coolvetica';
    src: url('../fonts/Coolvetica/Coolvetica.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.screen-image.screen-top {
    position: relative;
}
.screen-image.screen-top:after {
    position: absolute;
    content: '';
    display:block;
    background-image:url('../logo/header-logo_white.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 400px;
    aspect-ratio: 2/1;
    top: 100px;
    left: 30px;
}

.screen-image .image-caption h1 {
    text-transform: none;
}

.screen-image .image-caption p {
    font-family: Coolvetica, serif;
}


.screen-image.screen-fullscreen {
  height: 50vh;
  background-position: center;
}
@media (min-width: 992px) {
  div.screen-fullscreen {
    min-height: 700px;
  }
}

.machine_cards .row.fullwidthcardsrow {
    justify-content: space-around;
    width: 100%;
}
.machine_cards .col-12.col-md-6.fullwidthcards {
    flex-basis: max-content;
}
.machine_cards  img {
    display: none;
}

#kontakt-formular {
    --input-size: 25em;
    --gap-size: 15px;
    --primary-color: #ff6161;
    --secondary-color:#e9e9ed;

    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(2, var(--input-size));
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: var(--gap-size);
}

#kontakt-formular .fullwidth {
    grid-column: 1/3;
}

#kontakt-formular input {
    width: var(--input-size);
}

#kontakt-formular .message {
    width: calc(2 * var(--input-size) + var(--gap-size));
    height: 9em;
}
#kontakt-formular .attention {
    font-size: 0.9rem;
    color: var(--secondary);
}

#kontakt-formular button {
    border: 1px solid var(--secondary-color);
    background-color: var(--secondary-color);
    text-align: center;
    height: 60px;
    padding-inline: 20px;
    margin-right: var(--gap-size);
    border-radius: 10px;
}
#kontakt-formular .submit {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}
#kontakt-formular .submit:hover {
    background-color: color-mix(in oklab, var(--primary-color), black 20%);
    border-color: color-mix(in oklab, var(--primary-color), black 20%);
}
#kontakt-formular .cancel:hover {
    background-color: color-mix(in oklab, var(--secondary-color), black 20%);
    border-color: color-mix(in oklab, var(--secondary-color), black 20%);
}