/* Fusszeile mit grosser Welle, Adressen, Kontaktformular, Rechtslinks */
.fuss { position: relative; z-index: 4; overflow-x: clip; padding-top: calc(97 * var(--e)); background: linear-gradient(90deg, rgb(0, 74, 94) 0%, rgb(3, 57, 73) 47.5466%, rgb(9, 51, 60) 76.7441%); }
.fuss-welle { position: absolute; z-index: 0; left: 0; top: calc(-389 * var(--e)); width: calc(1936 * var(--e)); height: calc(1132 * var(--e)); pointer-events: none; overflow: hidden; }
.fuss-welle svg { width: 100%; height: 100%; }
.fuss-inhalt { position: relative; z-index: 1; display: grid; grid-template-columns: calc(751 * var(--e)) calc(799 * var(--e)); padding-left: calc(185 * var(--e)); }

.fuss-adressen { display: flex; gap: calc(40 * var(--e)); align-self: end; margin-bottom: -25px; }
.adresse:first-child { width: calc(295 * var(--e)); }
.adresse:last-child { width: calc(380 * var(--e)); }
.adresse h3 { font-family: var(--schrift-bold); font-size: calc(18 * var(--e)); line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; }
.adresse-welle { display: block; width: 49px; height: 20px; margin: 10px 0 11px; }
.adresse-welle svg { width: 100%; height: 100%; }
.adresse p { font-family: var(--schrift-light); font-size: 16px; line-height: 1.6; }
.adresse a { text-decoration: none; }
.adresse a.werkstatt-route { color: #a0e4ed; text-decoration: underline; text-underline-offset: .2em; }

.formular-titel { margin-left: calc(-24 * var(--e)); font-family: var(--schrift-bold); font-size: calc(40 * var(--e)); line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; }
.formular-text { width: calc(775 * var(--e)); margin-top: calc(50 * var(--e)); font-family: var(--schrift-light); font-size: 18px; line-height: 1.5; }
.formular { display: grid; grid-template-columns: 1fr 1fr; column-gap: 38px; row-gap: 25px; width: calc(775 * var(--e)); margin-top: 24px; }
.feld { grid-column: 1 / -1; display: flex; flex-direction: column; }
.feld-halb { grid-column: auto; }
.feld label span { margin-left: 4px; }
.feld label { margin-bottom: 9px; font-family: var(--schrift-light); font-size: 14px; line-height: 17px; text-transform: uppercase; }
.feld input, .feld select, .feld textarea { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #fff; border-radius: 0; background: #fff; color: #000; font-family: var(--schrift-light); font-size: 16px; }
.feld select { appearance: none; height: 42px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 12px center / 24px 24px; cursor: pointer; }
.feld textarea { height: 74px; padding: 10px 12px; resize: vertical; }
.feld input[aria-invalid="true"], .feld select[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: #ff6b6b; box-shadow: inset 0 0 0 1px #ff6b6b; }
.feld-fehler { min-height: 0; margin-top: 4px; color: #ffb4b4; font-family: var(--schrift-book); font-size: 13px; line-height: 1.3; }
.feld-fehler:empty { display: none; }
.senden { width: calc(376 * var(--e)); height: 41px; margin-top: 8px; border: 0; background: var(--senden); color: #fff; font-family: var(--schrift-light); font-size: 16px; text-transform: uppercase; cursor: pointer; transition: background-color .2s; }
.senden:hover { background: #0098bf; }
.senden:disabled { opacity: .7; cursor: default; }
.honig { display: none; }
.formular-meldung { grid-column: 1 / -1; color: #ffb4b4; font-family: var(--schrift-book); font-size: 14px; }
.formular-danke { grid-column: 1 / -1; padding: 24px 0; font-family: var(--schrift-bold); font-size: 18px; line-height: 1.5; letter-spacing: .1em; }
.formular-gesendet > .feld { display: none; }

.fuss-unten { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: calc(80 * var(--e)) calc(161 * var(--e)) calc(96 * var(--e)) calc(185 * var(--e)); }
.credit { color: var(--akzent); font-family: var(--schrift-light); font-size: 18px; line-height: 1.6; }
.fuss-recht { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.fuss-recht a { display: flex; align-items: center; height: 41px; padding: 0 18px; font-family: var(--schrift-book); font-size: 15px; text-decoration: none; text-transform: uppercase; }
.fuss-recht a:hover { color: var(--akzent); }
