/*
  Design refresh (pilot on the Minispielfeld site): readable type, one button colour, sticky header,
  hero headline and scroll animations. Loaded after custom.css by the layouts that use it; the
  animation classes are added by /Content/js/sg-motion.js. Raise ?v= in the layouts after changes.
*/
:root {
    /* Buttons use the primary colour, subheadings, icons and checkmarks the accent colour. */
    --sg-primary: #155f1c;
    --sg-primary-dark: #0e4413;
    --sg-primary-shadow: rgba(21, 95, 28, .25);
    --sg-accent: #155f1c;
    --sg-text: #333;
    --sg-ease: cubic-bezier(.2, .7, .2, 1);
}

/* en-US pages carry the SoccerGround USA logo: buttons and selections in Old Glory Blue, the blue of the
   US flag (hover goes lighter, as the colour is already very dark), subheadings and icons in the logo
   navy. Red is left to the flag in the logo; on buttons and checkboxes it read as a warning. */
html[lang="en-US"] {
    --sg-primary: #0a3161;
    --sg-primary-dark: #16427d;
    --sg-primary-shadow: rgba(10, 49, 97, .3);
    --sg-accent: #3b3b6f;
}

/* ---- Type ---- */
body {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--sg-text);
}

h1 {
    font-weight: 300;
}

h2 {
    font-weight: 400;
}

/* ---- Buttons: one colour everywhere ---- */
.btn-u,
.btn-u:focus {
    background: var(--sg-primary) !important;
    color: #fff !important;
    border: 0;
    border-radius: 4px;
    padding: 11px 22px;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    transition: background-color .2s, transform .2s var(--sg-ease), box-shadow .2s;
}

.btn-u:hover,
.btn-u:active {
    background: var(--sg-primary-dark) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px var(--sg-primary-shadow);
}

/* one.style.css and custom.css give body a fixed height of 100% (the window). The sticky header can
   only stick within the body, so on pages whose content did not stretch the body (configurators,
   contact) it scrolled away after one screen. */
body {
    height: auto;
    min-height: 100%;
}

/* ---- Header: stays at the top, gets smaller and a shadow once the page scrolls ---- */
.one-page-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow .3s, padding .3s;
}

.one-page-header .navbar-brand img {
    transition: width .3s var(--sg-ease);
}

.sg-scrolled .one-page-header {
    box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}

@media (min-width: 992px) {
    .sg-scrolled .one-page-header .navbar-brand img {
        width: 190px;
    }
}

@media (max-width: 767px) {
    .one-page-header .navbar-brand img {
        width: 190px;
    }

    .sg-scrolled .one-page-header .navbar-brand img {
        width: 150px;
    }
}

/* ---- Hero: headline and button on the photo ---- */
.sg-hero {
    position: relative;
}

.sg-hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 180px 24px 56px;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.sg-hero-overlay h1 {
    max-width: 1200px;
    margin: 0 auto 22px;
    color: #fff;
    font-size: clamp(22px, 3.4vw, 44px);
    font-weight: 400;
    line-height: 1.2;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .55);
}

.sg-hero-overlay .btn-u {
    pointer-events: auto;
    padding: 13px 28px;
    font-size: 17px;
}

@media (max-width: 767px) {
    .sg-hero-overlay {
        padding: 90px 16px 20px;
        background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .5) 60%, rgba(0, 0, 0, 0) 100%);
    }

    .sg-hero-overlay h1 {
        margin-bottom: 14px;
    }

    .sg-hero-overlay .btn-u {
        padding: 10px 18px;
        font-size: 15px;
    }
}

/* The desktop hero fills the screen below the header but stops at 900px on very tall screens: the
   slider subtracts the height of this invisible element (next to the header's) from the window height,
   and the browser keeps it up to date when the window is resized. */
.sg-hero-limit {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: max(0px, calc(100vh - 85px - 900px));
    visibility: hidden;
    pointer-events: none;
}

/* ---- Intro text below the hero ---- */
.sg-intro {
    margin-top: 56px;
    margin-bottom: 40px;
}

.sg-intro h2 {
    font-size: 18px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--sg-text);
}

@media (max-width: 767px) {
    .sg-intro {
        margin-top: 36px;
        text-align: left !important;
    }

    .sg-intro h2 {
        font-size: 17px;
    }
}

/* ---- Image/text rows ---- */
.team-v7 .team-v7-in {
    vertical-align: middle;
    padding: 40px 56px;
}

.team-v7 .team-v7-in h1 {
    margin-top: 0 !important;
    font-size: clamp(27px, 2.6vw, 36px);
    line-height: 1.2;
}

.team-v7 .team-v7-in h2 {
    margin-top: 0;
    font-size: 19px;
    line-height: 1.35;
    color: var(--sg-accent);
}

.team-v7 .team-v7-in p {
    font-size: 16.5px;
    line-height: 1.65;
    color: #444;
}

.team-v7 .team-v7-img {
    overflow: hidden;
}

.team-v7 .team-v7-img img {
    transition: transform .9s var(--sg-ease);
}

.team-v7 .team-v7-img:hover img {
    transform: scale(1.03);
}

@media (max-width: 991px) {
    .team-v7 .team-v7-in {
        padding: 32px 20px 36px;
    }
}

/* ---- Scroll animations (classes set by sg-motion.js; without it everything is simply visible) ---- */
.sg-reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity .6s ease, transform .7s var(--sg-ease);
    transition-delay: var(--sg-delay, 0ms);
}

.sg-reveal.sg-from-left {
    transform: translate3d(-48px, 0, 0);
}

.sg-reveal.sg-from-right {
    transform: translate3d(48px, 0, 0);
}

@media (max-width: 991px) {
    .sg-reveal.sg-from-left,
    .sg-reveal.sg-from-right {
        transform: translate3d(0, 24px, 0);
    }
}

.sg-reveal.sg-in {
    opacity: 1;
    transform: none;
}

.sg-hero-overlay > * {
    animation: sg-rise .8s var(--sg-ease) both;
}

.sg-hero-overlay > * + * {
    animation-delay: .15s;
}

@keyframes sg-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sg-reveal,
    .sg-reveal.sg-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .sg-hero-overlay > *,
    .team-v7 .team-v7-img img,
    .btn-u {
        animation: none;
        transition: none;
        transform: none !important;
    }
}

/* Long German words in headlines (e.g. "Datenschutzerklärung") must not push the page wider on phones. */
@media (max-width: 767px) {
    h1,
    h2 {
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

/* ---- Configurator: picture updating after an option, bar with summary and inquiry on phones ---- */
#myCarousel .carousel-inner {
    transition: opacity .2s;
}

#myCarousel.sg-updating .carousel-inner {
    opacity: .45;
}

#myCarousel.sg-updating::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border: 3px solid rgba(255, 255, 255, .7);
    border-top-color: var(--sg-accent);
    border-radius: 50%;
    animation: sg-spin .8s linear infinite;
}

#myCarousel.sg-fresh .item.active:not(.left):not(.right) img {
    animation: sg-fade-in .5s ease both;
}

/* After an in-place update: the old picture lies on top of the new one and fades out. */
#myCarousel .carousel-inner > .item {
    position: relative;
}

#myCarousel .carousel-inner > .item > img.sg-old-picture {
    position: absolute;
    top: 0;
    left: 0;
    animation: sg-fade-out .5s ease both;
    pointer-events: none;
}

/* Dots for the four views, on the picture's lower edge (phones and tablets; desktop has the arrows).
   Swiping must not scroll the page sideways. */
#myCarousel {
    touch-action: pan-y;
}

#myCarousel .sg-view-dots {
    display: none;
}

@media (max-width: 991px) {
    #myCarousel .sg-view-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        position: absolute;
        left: 50%;
        bottom: 8px;
        z-index: 6;
        width: auto;
        margin: 0;
        padding: 0;
        transform: translateX(-50%);
    }

    #myCarousel .sg-view-dots li,
    #myCarousel .sg-view-dots li.active {
        width: 8px;
        height: 8px;
        margin: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .55);
        box-shadow: 0 0 3px rgba(0, 0, 0, .45);
        text-indent: -999px;
        cursor: pointer;
    }

    #myCarousel .sg-view-dots li.active {
        background: #fff;
    }
}

@keyframes sg-fade-out {
    to {
        opacity: 0;
    }
}

@keyframes sg-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sg-fade-in {
    from {
        opacity: 0;
    }
}

.sg-config-bar {
    display: none;
}

@media (max-width: 767px) {
    .sg-config-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        align-items: center;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -4px 18px rgba(0, 0, 0, .12);
        transition: transform .3s var(--sg-ease);
    }

    .sg-config-bar.sg-hidden {
        transform: translateY(110%);
    }

    .sg-config-bar-text {
        flex: 1;
        min-width: 0;
        font-size: 13px;
        line-height: 1.35;
    }

    .sg-config-bar-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: #444;
    }

    .sg-config-bar .btn-u {
        flex: none;
        max-width: 55%;
        padding: 10px 12px;
        font-size: 14px;
        white-space: normal;
        line-height: 1.2;
    }

    .sg-config-bar .btn-u .fa {
        display: none;
    }

    .sg-has-config-bar body {
        padding-bottom: 76px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #myCarousel.sg-updating::after,
    #myCarousel.sg-fresh .item.active:not(.left):not(.right) img {
        animation: none;
    }

    #myCarousel .carousel-inner > .item > img.sg-old-picture {
        display: none;
    }

    .sg-config-bar {
        transition: none;
    }
}

/* ---- Projects page: project cards ---- */
.sg-builds-section {
    padding: 70px 0 30px;
    background: #f5f6f5;
}

.sg-builds-title {
    display: block; /* the projects page styles every h2 as inline, which ignores the margin */
    margin: 0 0 48px;
    text-align: center;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 300;
}

.sg-builds {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}

.sg-build {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    color: inherit;
    text-decoration: none !important;
    transition: transform .25s var(--sg-ease), box-shadow .25s;
    animation: sg-rise .5s var(--sg-ease) both;
}

.sg-build:hover,
.sg-build:focus {
    color: inherit;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

.sg-build-img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e6e8e6;
}

.sg-build-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--sg-ease);
}

.sg-build:hover .sg-build-img img {
    transform: scale(1.04);
}

.sg-build-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px 20px 20px;
}

.sg-build-date {
    font-size: 13px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #777;
}

.sg-build .sg-build-body h3 {
    display: block;
    margin: 4px 0 6px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: #111;
}

.sg-build-place {
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
}

.sg-build-place .glyphicon {
    display: inline;
    font-size: 13px;
    color: var(--sg-accent);
}

.sg-build-body p {
    display: -webkit-box;
    margin: 0 0 10px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    max-height: 4.65em; /* 3 lines; the clamp alone does not limit the height inside the card */
    font-size: 15px;
    line-height: 1.55;
    color: #444;
}

.sg-build-product {
    display: -webkit-box;
    margin-bottom: 12px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: 2.9em;
    font-size: 13px;
    line-height: 1.45;
    color: #777;
}

/* Keep the product line and "more" at the bottom of every card, whatever the text length. */
.sg-build-body p + .sg-build-product,
.sg-build-body p + .sg-build-more {
    margin-top: auto;
}

.sg-build-more {
    font-size: 14px;
    font-weight: 600;
    color: var(--sg-accent);
}

.sg-builds-actions {
    padding: 40px 0 50px;
    text-align: center;
}

@media (max-width: 767px) {
    .sg-builds-section {
        padding-top: 48px;
    }

    .sg-builds-title {
        margin-bottom: 32px;
    }

    .sg-builds {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sg-build,
    .sg-build-img img {
        animation: none;
        transition: none;
        transform: none !important;
    }
}

/* ---- en-US: the older styles (custom.css, sky forms, layout <style> blocks) hard-code the green ---- */
/* Configurator selections (swatch checkmarks, radios, checkboxes) use the button colour. */
html[lang="en-US"] .labelimg > input:checked + img {
    border-color: var(--sg-primary);
}

html[lang="en-US"] .labelimg > input:checked + img + i,
html[lang="en-US"] .sky-form .radio input:checked + i,
html[lang="en-US"] .sky-form .checkbox input:checked + i,
html[lang="en-US"] .sky-form .radio input + i:after,
html[lang="en-US"] .sky-form .toggle input:checked + i,
html[lang="en-US"] .chooseproduct,
html[lang="en-US"] .switch-field input:checked + label {
    background-color: var(--sg-primary);
    border-color: var(--sg-primary);
}

html[lang="en-US"] .sky-form .button {
    background: var(--sg-primary);
}

html[lang="en-US"] a:hover,
html[lang="en-US"] .one-page-header .navbar-nav > li > a:hover {
    color: var(--sg-primary);
}

/* ---- Configurator checkmarks: fill the box, centred both ways, a little larger ---- */
.sky-form .checkbox input + i:after,
.sky-form .radio input + i:after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0; /* sky-forms.css shifts the checkbox tick by -4px/-2px */
    font: normal 15px/23px FontAwesome;
    text-align: center;
}

.sky-form .radio input + i:after {
    line-height: 24px;
    border-radius: 50%;
}

.labelimg > input:checked + img + i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
}

/* ---- Google Maps and videos only after a click (sg-consent.js) ---- */
.sg-consent {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 240px;
    padding: 24px 16px;
    background: #eef1ee;
    color: var(--sg-text);
    text-align: center;
}

.sg-consent-inner {
    max-width: 460px;
}

/* Map areas: a neutral map illustration (not the real place: loading any real map image would already
   contact the map provider) with the notice as a card on top. */
.sg-consent-map {
    background: #eceee8 url(/Content/ui/map-placeholder.svg) center / cover no-repeat;
}

.sg-consent-map .sg-consent-inner {
    padding: 22px 26px 16px;
    background: rgba(255, 255, 255, .96);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
}

.sg-consent-map .sg-consent-inner::before {
    content: "\f041"; /* FontAwesome map marker */
    display: block;
    margin-bottom: 8px;
    font: normal 30px/1 FontAwesome;
    color: var(--sg-primary);
}

.sg-consent p {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.55;
}

.sg-consent label {
    display: block;
    margin: 14px 0 6px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.sg-consent label input {
    margin-right: 4px;
    vertical-align: -1px;
}

.sg-consent a,
.sg-consent-revoke {
    font-size: 13px;
    color: #666;
    text-decoration: underline;
}

.sg-consent-revoke {
    display: inline-block;
    margin: 6px 0 12px;
}

.sg-embed {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 16px 0;
    background: #1d1f1d;
}

.sg-embed .sg-consent {
    position: absolute;
    inset: 0;
    min-height: 0;
    background: #1d1f1d;
    color: #eee;
}

.sg-embed .sg-consent p,
.sg-embed .sg-consent label {
    color: #e8e8e8;
}

.sg-embed .sg-consent a {
    color: #c8c8c8;
}

.sg-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 480px) {
    .sg-embed {
        aspect-ratio: auto !important;
        min-height: 300px;
    }

    .sg-embed.sg-embed-loaded {
        aspect-ratio: 16 / 9 !important;
        min-height: 0;
    }
}

/* ---- Footer: smaller and lighter than the page content ---- */
#Contact .bg-grey {
    padding-top: 64px !important;
    padding-bottom: 48px !important;
}

#Contact,
#Contact p {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

#Contact a {
    color: #444;
}

#Contact a:hover {
    color: var(--sg-primary);
}

#Contact .footer-logo {
    width: 200px;
    height: auto;
}

/* Side by side (desktop): columns 2-4 start with three empty lines; the space below the logo is set
   so the address in the first column starts on the same line as their text. */
@media (min-width: 992px) {
    #Contact a:has(> .footer-logo) {
        display: block;
        height: calc(2 * 1.6em);
    }

    #Contact .footer-logo {
        display: block;
        margin-bottom: 0 !important;
    }

    #Contact a:has(> .footer-logo) + div:empty {
        display: none;
    }
}

.footer-simple,
.footer-simple p {
    font-size: 13px;
    color: #666;
}

/* Stacked columns (phones, tablets): the footer text starts columns 2-4 with empty lines that align
   them with the address under the logo on desktop; stacked, they only leave large gaps. */
@media (max-width: 991px) {
    #Contact [class*="col-md-"] > br,
    #Contact [class*="col-md-"] > p:first-child > br:first-child,
    #Contact [class*="col-md-"] > p:first-child > br:first-child + br,
    #Contact [class*="col-md-"] > p:first-child > br:first-child + br + br {
        display: none;
    }

    #Contact .md-margin-bottom-40 {
        margin-bottom: 16px !important;
    }

    #Contact .bg-grey {
        padding-top: 40px !important;
        padding-bottom: 32px !important;
    }
}

/* ---- Configurator picture: a little taller on desktop, clearly taller on phones ----
   The renders are 1110x520 (2.13:1). A taller frame shows the same picture scaled up to the frame's
   height, trimmed evenly left and right (the court nearly reaches the edges, so only a little). */
#myCarousel.imgcont {
    padding-bottom: 49%;
}

#myCarousel.imgcont .carousel-inner {
    position: absolute;
    inset: 0;
}

#myCarousel.imgcont .carousel-inner > .item {
    height: 100%;
}

/* All four views stay rendered, stacked and invisible, instead of display: none. Safari (iPhone)
   otherwise discards the decoded pictures of hidden views and decodes them again while they slide
   in, which shows a white gap for a moment. Bootstrap's slide classes move them as before. */
#myCarousel.imgcont .carousel-inner > .item {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
}

#myCarousel.imgcont .carousel-inner > .item.active,
#myCarousel.imgcont .carousel-inner > .item.next,
#myCarousel.imgcont .carousel-inner > .item.prev {
    visibility: visible;
}

#myCarousel.imgcont .carousel-inner > .item > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Phones in portrait only: taller picture that stays below the header. In landscape a phone screen
   is only ~340px high; a fixed picture would cover it completely. */
@media (max-width: 767px) and (orientation: portrait) {
    #myCarousel.imgcont {
        padding-bottom: 60%;
    }

    /* Phones: the picture stays below the header while the options scroll underneath, so every
       change is visible. The form's box is only as tall as the picture (its contents float), which
       would end the sticking at once; display: contents lets the picture stick within the page
       container instead (the form still submits as before). */
    form.sky-form:has(> #myCarousel) {
        display: contents;
    }

    #myCarousel.imgcont {
        position: sticky;
        top: var(--sg-header-h, 70px);
        z-index: 20;
        box-shadow: 0 8px 14px -10px rgba(0, 0, 0, .45);
    }
}

/* Product selector (Minispielfeld / Portable / Panna Cage): two logos per row on phones */
.sky-form .inline-group:has(img[src*="/product-"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0; /* the &nbsp; spacers between the logos (they also become flex items, so no gap) */
}

.sky-form .inline-group:has(img[src*="/product-"]) a {
    margin: 4px 28px 4px 0;
}

.sky-form .inline-group:has(img[src*="/product-"]) img {
    width: 220px; /* the original size on desktop */
    height: auto;
}

@media (max-width: 767px) {
    .sky-form .inline-group:has(img[src*="/product-"]) {
        justify-content: space-between;
    }

    .sky-form .inline-group:has(img[src*="/product-"]) a {
        flex: 0 0 47%;
        margin: 4px 0;
    }

    .sky-form .inline-group:has(img[src*="/product-"]) img {
        width: 100%;
    }

    /* Minispielfeld and Portable configurators show only their two logos on phones (one row); the
       Panna Cage configurator, where the cage logo is the selected one, keeps all three. */
    .sky-form .inline-group a:has(img[src*="/product-cage"][src*="-unchecked"]) {
        display: none;
    }
}

/* ---- Configurator options: a little room below colour swatches (their checkmark hangs below the
   picture), and tighter spacing on phones ---- */
.sky-form section:has(.labelimg),
.sky-form [class*="col-"]:has(> label.labelimg) {
    padding-bottom: 24px;
}

@media (max-width: 767px) {
    form.sky-form section,
    .sky-form section {
        margin-bottom: 12px;
    }

    /* the rows between the divider lines carry inline margins of 18-20px */
    #myCarousel ~ .row,
    #myCarousel ~ div > .row,
    .sky-form .divhr + .row {
        margin-top: 10px !important;
    }
}

/* Very narrow phones (320px): option labels such as "Roof Netting" fit on one line */
@media (max-width: 359px) {
    .sky-form label.checkbox,
    .sky-form label.radio {
        font-size: 15px;
    }

    /* sky-forms keeps 30px to the right of each option for side-by-side options; here they stack */
    .sky-form .inline-group .checkbox,
    .sky-form .inline-group .radio {
        margin-right: 0;
    }
}

/* Day/Night switch on the configurator picture (moved into the picture by sg-motion.js) */
#myCarousel .sg-daynight {
    position: absolute !important;
    top: auto !important;
    right: 14px;
    bottom: 14px;
    z-index: 6;
    margin: 0;
}

#myCarousel .sg-daynight > div:first-child {
    display: none; /* the empty column that pushed the switch to the right */
}

#myCarousel .sg-daynight > div {
    float: none;
    width: auto;
    padding: 0;
}

@media (max-width: 767px) {
    #myCarousel .sg-daynight {
        right: 8px;
        bottom: 8px;
    }
}

/* The block below the picture was pulled up 20px to overlap the old Day/Night row; that row now sits
   inside the picture (always, also when hidden), so the block keeps its normal distance. */
form.sky-form > #myCarousel ~ div[style*="margin-top:-20px"] {
    margin-top: 16px !important;
}

/* Phones in landscape (481-767px), where two options of a group fit side by side: sizes, Netze and
   Multisport all use the same half-column grid, instead of being spaced by text length plus 30px. */
@media (min-width: 481px) and (max-width: 767px) {
    .sky-form .inline-group > label.checkbox,
    .sky-form .inline-group label.radio {
        width: 50%;
        margin-right: 0;
    }
}

/* Configuration summary ("20 x 13m, Tore: 3 x 2m, ..."): smaller, and on desktop always two lines
   high, so the page below does not jump when an option makes the text wrap onto a second line. */
#scr + .row p {
    font-size: 15px;
    line-height: 1.5;
}

@media (min-width: 768px) {
    #scr + .row p {
        min-height: 3em; /* two lines */
    }
}