:root {
--c-white: #fff;
--c-black: #000;
--c-yellow-300: #f8eb6c;
--c-yellow-400: #ffe500;
--c-brown-200: #eee9e0;
--c-brown-300: #eae5dc;
--c-brown-400: #dbd1bf;
--c-brown-500: #cbbba0;
--c-brown-600: #b1a188;
--c-brown-700: #432918;
--c-gray-200: #bebebe;
--c-gray-300: #f0f0f0;
--c-gray-400: #efefef;
--c-gray-500: #535353;
--c-gray-600: #d5d5d5;
--c-gray-700: #626262;
--c-primary: var(--c-yellow-400);
--c-text: var(--c-black);
--f-main: "Noah", sans-serif;
--f-headings: "Noah", sans-serif;
--wrapper-width: 120rem;
--padding-width: 2rem;
--gutter-width: 2rem;
--transition-duration: 0.25s;
}
.form {
margin-bottom: 12rem;
}
@media (min-width: 992px) {
.form {
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 2.3rem;
margin-bottom: 14.29rem;
}
}
.form__heading {
font-size: 3.2rem;
line-height: 3.8rem;
letter-spacing: 0.096rem;
margin-bottom: 5.6rem;
}
@media (min-width: 992px) {
.form__heading {
font-size: 4.5rem;
line-height: 3rem;
letter-spacing: 0.135rem;
margin-bottom: 6.5rem;
}
}
.form__fields {
display: grid;
grid-row-gap: 1.4rem;
}
@media (min-width: 992px) {
.form__fields {
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 2.3rem;
}
}
.form__field input:not(input[type="submit"]),
.form__field select,
.form__field textarea {
font-size: 1.7rem;
line-height: 2.5rem;
letter-spacing: 0.051rem;
display: block;
width: 100%;
padding: 1.15rem 2rem;
color: var(--c-black);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #eee9e0;
border: 0.1rem solid transparent;
outline: none;
caret-color: var(--c-black);
}
.form__field input:not(input[type="submit"])::-webkit-input-placeholder,
.form__field select::-webkit-input-placeholder,
.form__field textarea::-webkit-input-placeholder {
color: var(--c-black);
}
.form__field input:not(input[type="submit"])::-moz-placeholder,
.form__field select::-moz-placeholder,
.form__field textarea::-moz-placeholder {
color: var(--c-black);
}
.form__field input:not(input[type="submit"]):-ms-input-placeholder,
.form__field select:-ms-input-placeholder,
.form__field textarea:-ms-input-placeholder {
color: var(--c-black);
}
.form__field input:not(input[type="submit"])::-ms-input-placeholder,
.form__field select::-ms-input-placeholder,
.form__field textarea::-ms-input-placeholder {
color: var(--c-black);
}
.form__field input:not(input[type="submit"])::placeholder,
.form__field select::placeholder,
.form__field textarea::placeholder {
color: var(--c-black);
}
.form__field input:not(input[type="submit"]):active::-webkit-input-placeholder,
.form__field input:not(input[type="submit"]):focus::-webkit-input-placeholder,
.form__field select:active::-webkit-input-placeholder,
.form__field select:focus::-webkit-input-placeholder,
.form__field textarea:active::-webkit-input-placeholder,
.form__field textarea:focus::-webkit-input-placeholder {
opacity: 0.4;
}
.form__field input:not(input[type="submit"]):active::-moz-placeholder,
.form__field input:not(input[type="submit"]):focus::-moz-placeholder,
.form__field select:active::-moz-placeholder,
.form__field select:focus::-moz-placeholder,
.form__field textarea:active::-moz-placeholder,
.form__field textarea:focus::-moz-placeholder {
opacity: 0.4;
}
.form__field input:not(input[type="submit"]):active:-ms-input-placeholder,
.form__field input:not(input[type="submit"]):focus:-ms-input-placeholder,
.form__field select:active:-ms-input-placeholder,
.form__field select:focus:-ms-input-placeholder,
.form__field textarea:active:-ms-input-placeholder,
.form__field textarea:focus:-ms-input-placeholder {
opacity: 0.4;
}
.form__field input:not(input[type="submit"]):active::-ms-input-placeholder,
.form__field input:not(input[type="submit"]):focus::-ms-input-placeholder,
.form__field select:active::-ms-input-placeholder,
.form__field select:focus::-ms-input-placeholder,
.form__field textarea:active::-ms-input-placeholder,
.form__field textarea:focus::-ms-input-placeholder {
opacity: 0.4;
}
.form__field input:not(input[type="submit"]):active::placeholder,
.form__field input:not(input[type="submit"]):focus::placeholder,
.form__field select:active::placeholder,
.form__field select:focus::placeholder,
.form__field textarea:active::placeholder,
.form__field textarea:focus::placeholder {
opacity: 0.4;
}
.form__field select {
background-color: var(--c-brown-500);
background-image: url(//blaettler-holzbau.ch/wp-content/themes/webwirkung-new/dist/blocks/form/images/icon-arrow-down--select.svg);
background-position-x: calc(100% - 2.57rem);
background-position-y: 50%;
background-repeat: no-repeat;
padding-right:60px;
}
.form__field select:focus,
.form__field select:hover {
cursor: pointer;
}
.form__field textarea {
max-height: 22.828rem;
}
@media (min-width: 768px) {
.form__field textarea {
max-height: 17.9rem;
}
}
.form__field input[type="submit"] {
padding-top: 1.3rem;
}
.form__field input[type="submit"]:focus,
.form__field input[type="submit"]:hover {
cursor: pointer;
}
@media (min-width: 992px) {
.form__field.-separated {
margin: 2.35rem 0;
}
}
@media (min-width: 992px) {
.form__field.-full {
grid-column: 1/3;
}
}
@media (min-width: 992px) {
.form__field.-with-space select {
margin: 1.8rem 0;
}
}
.form__submit {
margin: 1.88rem auto 0;
border: none;
}
@media (min-width: 992px) {
.form__submit {
margin: 2.11rem auto 0;
}
}
.form .wpcf7-not-valid-tip {
margin-top: 1rem;
font-size: 1.1rem;
}
.form .wpcf7-spinner {
position: absolute;
left: 50%;
bottom: -4rem;
margin: 0;
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.form .wpcf7 form .wpcf7-response-output {
margin-left: 0;
margin-right: 0;
padding: 1.7rem 1.4rem 1.4rem;
background-color: var(--c-primary);
border: none;
}
#wpcf7-f1159-p396-o1 .wpcf7-form.sent .wpcf7-response-output {
display: none !important;
}