html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map,
#map-canvas {
height: 100%;
}
.vh50 {
height: 50vh;
}
.vh40 {
height: 40vh;
}
/* Used by hero.html. The headline and copy are part of the artwork, so the hero
must never be cropped: the image scales to the full width and the container
takes its height from the image's own 1920x700 ratio. */
.title-image-container {
width: 100%;
position: relative;
}
.title-image-img {
display: block;
width: 100%;
height: auto;
}
#id_betriebsgroesse,
#id_branche {
background-repeat: no-repeat;
}
@media (max-width: 768px) {
.o-header {
overflow: hidden;
padding: 1em;
}
}
.title-image-text {
position: absolute;
z-index: 4;
top: 15rem;
left: 1rem;
color: white;
letter-spacing: -0.02em;
text-align: left;
background-color: #003e64;
padding-right: 5rem;
padding-bottom: 5rem;
}
@media (min-width:480px) {
.title-image-text {
left: 1rem;
}
}
@media (min-width:768px) {
.title-image-text {
left: 3rem;
}
}
@media (min-width:992px) {
.title-image-text {
left: 4rem;
}
}
@media (min-width: 1200px) {
.title-image-text {
left: 6rem;
}
}
@media (min-width: 1400px) {
.title-image-text {
left: 8rem;
}
}
@media (min-width: 1600px) {
.title-image-text {
left: 12rem;
}
}
/* The frontend-kit sets `.a-text-field { width: auto }`, which wins over the
Bootstrap `col-*` widths, so the columns are sized via flex-grow instead.
These helpers switch that behaviour at the 567px breakpoint. */
.my-col-6 {
width: auto !important;
}
@media (min-width: 567px) {
.my-col-6 {
width: 50% !important;
}
}
.my-checkbox > div {
margin-bottom: 0.5em;
}
.my-checkbox-inline > div > div {
display: flex;
}
.less-space-row {
margin-bottom: 0em;
margin-top: 0em;
}
.flex-grow-1-when-small {
flex-grow: 1 !important;
}
@media (min-width: 567px) {
.flex-grow-1-when-small {
flex-grow: 0 !important;
}
}
.title-image-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 3;
}
.checkbox {
padding-left: calc(var(--bs-gutter-x) * 0.5);
}
/* The frontend-kit draws the checkmark with `position: absolute; left: 0` but
without a `top`, so it falls back to its static position — the LAST line of
the label. The box itself (label:before) is pinned to `top: 0`. On a
single-line label both coincide; as soon as the label wraps or contains a
(the newsletter checkbox on FR), the checkmark is drawn below the box.
app.css is loaded after frontend-kit.css, so this same-specificity rule wins. */
.a-checkbox input[type="checkbox"]:checked + label:after {
top: 0;
}
/* The contact-preference options stay radios (exactly one choice), but should
carry the same square Bosch tick as the privacy checkbox. The frontend-kit
rules that produce that look only match input[type=checkbox], so they are
mirrored here for input[type=radio]. Scoped via `input + label` so the