/*
  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);
    /* Light surfaces in the primary colour's hue: highlight cards (e.g. "Ihre Konfiguration"), selected
       options, menu hovers. */
    --sg-tint: #f2f7f3;
    --sg-tint-strong: #eef5ef;
    /* Marked text: a light shade of the primary colour with dark text, readable on white and on photos. */
    --sg-selection: #c9e3cd;
    --sg-selection-text: #0e4413;
}

/* 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;
    /* the light surfaces in a blue-grey that goes with the navy, instead of the green tint */
    --sg-tint: #eef2f8;
    --sg-tint-strong: #e6edf7;
    --sg-selection: #c8d7ee;
    --sg-selection-text: #0a3161;
}

/* Marked text in the brand colours (the template marked it in its own lime green). */
::selection {
    color: var(--sg-selection-text);
    background: var(--sg-selection);
}

/* ---- 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%;
}

/* The scrollbar's space is always kept: on a first visit the browser drew the top of the page before the rest
   had arrived, without a scrollbar, and the whole page jumped sideways when it appeared (with scrollbars that
   are always shown, e.g. a Mac with a mouse or Windows). */
html {
    overflow-y: scroll;
}

/* ---- 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 {
    height: auto;
    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: 220px 24px 56px;
    text-align: center;
    /* soft shading for the headline: light, fading out gradually (eased stops, no visible edge) */
    background: linear-gradient(to top,
        rgba(0, 0, 0, .5) 0%,
        rgba(0, 0, 0, .4) 25%,
        rgba(0, 0, 0, .26) 50%,
        rgba(0, 0, 0, .12) 72%,
        rgba(0, 0, 0, .04) 88%,
        rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* Headline: optional small line in capitals above a large, bold claim (Views/Shared/_HeroOverlay.cshtml),
   left-aligned in the content width; main button plus an outline button to the reference projects. */
.sg-hero-overlay {
    text-align: left;
}

.sg-hero-content {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

.sg-hero-title {
    max-width: 1140px;
    margin: 0 0 26px;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.sg-hero-eyebrow {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
    font-size: clamp(17px, 1.7vw, 24px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
}

.sg-hero-eyebrow::before {
    content: "";
    flex: 0 0 44px;
    height: 3px;
    margin-top: calc(.625em - 1.5px);   /* centred on the first line when the text wraps */
    border-radius: 2px;
    background: #fff;
}

.sg-hero-claim {
    display: block;
    font-size: clamp(34px, 4.5vw, 64px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.015em;
    text-wrap: balance;
}

.sg-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
}

/* Both buttons alike: white outline, filled white on hover. */
.sg-hero-button {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    font-size: 16.5px;
    font-weight: 600;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 999px;
    background: rgba(128, 128, 128, .1);   /* slight grey, the photo behind softly blurred */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

/* The configurator button: the site's colour, semi-transparent (green; blue on the US site). */
.sg-hero-button.sg-hero-button-main {
    background: color-mix(in srgb, var(--sg-primary) 60%, transparent);
}

.sg-hero-button:hover,
.sg-hero-button:focus {
    color: #222;
    background: #fff;
    text-decoration: none;
    text-shadow: none;
    transform: translateY(-2px);
}

/* Entrance: the lines appear one after another. */
@media (prefers-reduced-motion: no-preference) {
    .sg-hero-eyebrow,
    .sg-hero-claim,
    .sg-hero-actions {
        animation: sg-rise .8s var(--sg-ease, ease) both;
    }

    .sg-hero-claim {
        animation-delay: .12s;
    }

    .sg-hero-actions {
        animation-delay: .26s;
    }
}

@media (max-width: 767px) {
    .sg-hero-overlay {
        padding: 110px 16px 22px;
        background: linear-gradient(to top,
            rgba(0, 0, 0, .6) 0%,
            rgba(0, 0, 0, .46) 30%,
            rgba(0, 0, 0, .28) 55%,
            rgba(0, 0, 0, .12) 76%,
            rgba(0, 0, 0, .04) 90%,
            rgba(0, 0, 0, 0) 100%);
    }

    .sg-hero-content {
        padding: 0;
    }

    .sg-hero-title {
        margin-bottom: 16px;
    }

    .sg-hero-eyebrow {
        gap: 10px;
        margin-bottom: 8px;
        font-size: 15px;
        letter-spacing: .06em;
        text-wrap: balance;
    }

    .sg-hero-eyebrow::before {
        flex-basis: 22px;
    }

    .sg-hero-actions {
        gap: 10px 12px;
    }

    .sg-hero-button {
        padding: 10px 20px;
        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;
        margin-bottom: 24px;
        text-align: left !important;
    }

    /* A running text: no automatic hyphenation (the rule for long headings on phones hit it too). */
    .sg-intro h2 {
        font-size: 17px;
        margin-bottom: 16px !important;
        -webkit-hyphens: manual;
        hyphens: manual;
    }
}

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

/* Row heading and subheading. They were h1/h2 (several h1 per page); now h2.sg-row-head and
   h3.sg-row-sub, styled by class so they look as before. */
.team-v7 .team-v7-in h1,
.team-v7 .team-v7-in .sg-row-head {
    margin-top: 0 !important;
    font-size: clamp(27px, 2.6vw, 36px);
    font-weight: 300;
    line-height: 1.2;
    color: #000;
}

.team-v7 .team-v7-in h2:not(.sg-row-head),
.team-v7 .team-v7-in .sg-row-sub {
    margin-top: 0;
    font-size: 19px;
    font-weight: 400;
    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;
}

/* While a new configuration loads the picture stays as it is, without a spinner (in Safari on the Mac the
   spinner appearing showed the picture white for a moment); the new one fades in over it. */

#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;
    z-index: 1;
    animation: sg-fade-out .5s ease both;
    pointer-events: none;
}

/* Until the new picture is ready underneath, the copy stays fully visible. */
#myCarousel .carousel-inner > .item > img.sg-old-picture.sg-old-picture-hold {
    animation: 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-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);
}

/* Links only: buttons keep their own hover colours (the blue text made the back button unreadable). */
html[lang="en-US"] a:not(.btn):not(.sg-back):not(.sg-hero-button):not(.sg-product-card):not(.sg-nav-cta):not(.sg-nav-product):not(.sg-config-product):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;
}

/* Footer with the class sg-footer (the Footer texts): logo with address and contact on the left, then
   (German) the legal details and the certification, all starting on the same line. */
#Contact .sg-footer .sg-footer-logo {
    display: block;
    height: auto;
    margin-bottom: 20px;
}

#Contact .sg-footer .footer-logo {
    margin: 0 !important;
}

#Contact .sg-footer-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0 48px;
}

#Contact .sg-footer p {
    width: auto;    /* the template sets width and height 100% on every paragraph */
    height: auto;
}

#Contact .sg-footer-details p {
    margin: 0 0 12px;
}

#Contact .sg-footer-details .fa {
    width: 16px;
    color: #888;
}

#Contact .sg-footer-cert p,
#Contact .sg-footer-legal p {
    margin: 0 0 14px;
}

#Contact .sg-footer-cert img {
    display: block;
    width: 130px;
    height: auto;
}

@media (min-width: 992px) {
    #Contact .sg-footer {
        display: flex;
    }

    #Contact .sg-footer .sg-footer-logo {
        height: 24px;
        margin-bottom: 20px;
    }

    #Contact .sg-footer-cert,
    #Contact .sg-footer-legal {
        padding-top: 44px;   /* the logo's height and gap on the left */
        padding-left: 32px;
        border-left: 1px solid #e2e2e2;
    }

    #Contact .sg-footer-cert p {
        max-width: 420px;
    }
}

@media (max-width: 991px) {
    /* The rule below for the old footer hides the first line breaks of a column; the sg-footer texts
       have no empty lines, their line breaks stay. */
    #Contact .sg-footer [class*="col-md-"] > p > br {
        display: inline !important;
    }

    #Contact .sg-footer-cert,
    #Contact .sg-footer-legal {
        margin-top: 8px;
        padding-top: 20px;
        border-top: 1px solid #e2e2e2;
    }
}

/* 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;
}

/* Only the sliding itself is animated: a view waiting in the stack, or being put next to the picture
   before it slides in, jumps there (being displayed, it would otherwise glide and cancel the slide). */
#myCarousel.imgcont .carousel-inner > .item:not(.active):not(.next):not(.prev),
#myCarousel.imgcont .carousel-inner > .item.next:not(.left),
#myCarousel.imgcont .carousel-inner > .item.prev:not(.right) {
    transition: none;
}

#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 */
    }
}

/* Form fields on phones and tablets: iPhone/iPad Safari zooms into any field with text smaller than
   16px when it is tapped, and the page stays zoomed after leaving the field. At 16px it does not
   zoom (pinch zoom keeps working). */
@media (max-width: 991px), (pointer: coarse) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Projects map: card shown when a marker is hovered (tapped on touch screens), placed above it. */
.sg-map-card {
    position: absolute;
    z-index: 10;
    width: 240px;
    transform: translate(-50%, calc(-100% - 14px));
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
    font-family: "Open Sans", Arial, sans-serif;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s;
}

.sg-map-card.sg-map-card-open {
    opacity: 1;
    visibility: visible;
}

.sg-map-card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, .08);
}

.sg-map-card-img {
    height: 128px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background: #eee;
}

.sg-map-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sg-map-card-body {
    position: relative;
    z-index: 1;
    padding: 10px 14px 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #555;
}

.sg-map-card-body strong {
    display: block;
    margin-bottom: 2px;
    font-size: 14.5px;
    font-weight: 600;
    color: #222;
}

.sg-map-card-body span {
    display: block;
}

.sg-map-card-body a {
    display: inline-block;
    margin-top: 6px;
    font-weight: 600;
    color: var(--sg-primary);
}

.sg-map-card.sg-map-card-below {
    transform: translate(-50%, 14px);
}

.sg-map-card.sg-map-card-below::after {
    top: -7px;
    bottom: auto;
    box-shadow: -3px -3px 6px rgba(0, 0, 0, .06);
}

/* Project page: button above the self-hosted map that loads the satellite image (Google). */
.sg-map-satellite {
    position: absolute;
    left: 50%;
    bottom: 36px;
    z-index: 5;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 12px 16px;
    text-align: center;
    background: rgba(255, 255, 255, .94);
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .2);
}

.sg-map-satellite .btn-u {
    white-space: normal;
}

.sg-map-satellite small {
    display: block;
    margin-top: 8px;
    max-width: 280px;
    font-size: 12px;
    line-height: 1.4;
    color: #666;
}

/* Collapsed menu (phones, tablets): custom.css floats every menu link to the right, which put the entries
   in rows from right to left, i.e. in reverse order. One below the other instead, right-aligned under the
   menu button. */
@media (max-width: 991px) {
    .one-page-header .navbar-nav > li > a {
        float: none;
        margin-top: 0;
        padding: 12px 15px;
        text-align: right;
    }
}

/* ---- Project page: back button, title, large photo, text and a location card (aerial image or map) ---- */
.sg-project {
    padding-top: 32px;
    padding-bottom: 64px;
}

.sg-project-head {
    margin: 4px 0 20px;
}

.sg-project-date {
    display: block;
    margin-bottom: 4px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--sg-primary);
}

.sg-project-head h1 {
    margin: 0 0 6px;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 300;
    line-height: 1.15;
}

.sg-project-place {
    margin: 0;
    font-size: 18px;
    color: #666;
}

.sg-project-photo {
    margin-bottom: 36px;
    overflow: hidden;
    border-radius: 10px;
    background: #ddd;
}

.sg-project-photo img {
    display: block;
    width: 100%;
    height: auto;   /* the photo's own shape (width/height attributes): 5:3 as before, 4:3 from Oct 2026 */
    max-height: calc(100vh - 140px);
    object-fit: cover;
}

.sg-project-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: 48px;
    align-items: start;
}

/* White page like the others; the text plain on white, aligned with the photo's edge. */
.sg-project-page {
    background: #fff;
}

.sg-project-text p {
    font-size: 17px;
    line-height: 1.65;
    color: #444;
}

.sg-project-text p:last-child {
    margin-bottom: 0;
}

/* Headings, lists and photos inside a project text (texts written in HTML): the same rhythm as the articles. */
.sg-project-text h2:not(.sg-project-label),
.sg-project-text h3 {
    margin: 32px 0 10px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
    color: #222;
}

.sg-project-label + h2,
.sg-project-label + h3 {
    margin-top: 0;
}

.sg-project-text ul,
.sg-project-text ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.sg-project-text li {
    font-size: 17px;
    line-height: 1.65;
    color: #444;
}

.sg-project-text li + li {
    margin-top: 6px;
}

.sg-project-text img {
    max-width: 100%;
    height: auto;
    margin: 6px 0 14px;
    border-radius: 8px;
}

/* The browser closes the text's paragraph before a heading or list, which leaves an empty one behind. */
.sg-project-text p:empty {
    display: none;
}

/* The product name in the product info links to its product page (MiniPitchProducts.LinkProductName). */
.sg-project-product a {
    font-weight: 600;
    color: var(--sg-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.sg-project-product a:hover,
.sg-project-product a:focus {
    text-decoration-thickness: 2px;
}

.sg-project-product {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #dfe3df;
}

/* Heading of both columns ("Über das Projekt" in the text box, "Lage" above the card): a short bar in the
   site's colour, then the label in capitals. */
.sg-project-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sg-primary);
}

.sg-project-label::before {
    content: "";
    flex: 0 0 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--sg-primary);
}



/* Aerial image of a verified location (open data, Content/img/aerial) with a pin in the middle, and the
   map of the others: the same card. */
.sg-aerial,
.sg-project-location #map {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #ddd;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .1);
}

.sg-aerial img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sg-aerial-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #e5302a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.sg-aerial figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 4px 10px;
    font-size: 12px;
    color: #333;
    background: rgba(255, 255, 255, .85);
    border-radius: 8px 0 0 0;
}

@media (max-width: 991px) {
    .sg-project-body {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .sg-project-location .sg-project-label {
        margin-top: 8px;
    }

    .sg-aerial,
    .sg-project-location #map {
        aspect-ratio: 1;
    }
}

/* ---- Merged SoccerGround site (preview): start page ---- */
/* The start page's hero takes its height from the slideshow, not from the height reserved for the old
   sliders (.sg-hero min-height, up to 900px), which left a dark band below the photos on tall screens. */
.sg-hero.sg-brand-hero {
    min-height: 0;
}

.sg-brand-hero .sg-hero-slides {
    position: relative;
    overflow: hidden;
    height: min(calc(100vh - var(--sg-header-h, 85px)), 820px);
    min-height: 420px;
    background: #1d2a1f;
}

/* The photos lie on top of each other; the active one fades in and zooms in slowly. */
.sg-brand-hero .sg-hero-slides img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1);
    transition: opacity 1.6s ease, transform 9s ease-out;
}

.sg-brand-hero .sg-hero-slides img.is-active {
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    /* is-running: set by the page's script after the first frame, so the first photo zooms as well */
    .sg-brand-hero .sg-hero-slides.is-running img.is-active {
        transform: scale(1.08);
    }
}

.sg-products {
    padding: 72px 0 56px;
}

.sg-section-title {
    margin: 0 0 32px;
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 300;
}

.sg-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.sg-product-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #333;
    background: #fff;
    border-radius: 10px;
    border-top: 4px solid var(--sg-product);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .1);
    transition: transform .2s ease, box-shadow .2s ease;
}

.sg-product-card:hover,
.sg-product-card:focus {
    color: #333;
    text-decoration: none;
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}

.sg-product-image {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.sg-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.sg-product-card:hover .sg-product-image img {
    transform: scale(1.04);
}

.sg-product-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px 22px;
}

.sg-product-body strong {
    font-size: 22px;
    font-weight: 600;
    color: #222;
}

.sg-product-body span {
    flex: 1;
    font-size: 15.5px;
    line-height: 1.55;
    color: #555;
}

.sg-product-body em {
    font-style: normal;
    font-weight: 600;
    color: var(--sg-primary);
}

@media (max-width: 991px) {
    .sg-product-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Hero: sentence under the headline saying what we do. */
.sg-hero-sub {
    max-width: 920px;
    text-wrap: balance;   /* no single word on the last line */
    margin: -10px 0 26px;
    font-size: clamp(16px, 1.35vw, 20px);
    line-height: 1.45;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}

@media (prefers-reduced-motion: no-preference) {
    .sg-hero-sub {
        animation: sg-rise .8s var(--sg-ease, ease) both;
        animation-delay: .2s;
    }
}

@media (max-width: 767px) {
    .sg-hero-sub {
        margin: -4px 0 16px;
        font-size: 15.5px;
    }
}

.sg-nowrap {
    white-space: nowrap;
}

/* Phones: buttons wrap instead of widening the page (Bootstrap's .btn never wraps; the German
   "Minispielfeld konfigurieren & Angebot anfordern" was 438px wide and made every page scroll sideways). */
@media (max-width: 767px) {
    .btn,
    .sg-hero-button {
        max-width: 100%;
        white-space: normal;
    }
}

/* Phones: nothing may widen the page sideways (e.g. the hidden tick of the last swatch on 320px screens).
   clip, unlike hidden, keeps position: sticky working (the configurator picture). */
@media (max-width: 767px) {
    html,
    body {
        overflow-x: clip;
    }
}

/* Project page: back to the references (or wherever the visitor came from). */
.sg-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 9px 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--sg-primary);
    background: #fff;
    border: 2px solid var(--sg-primary);
    border-radius: 999px;
    transition: background-color .2s ease, color .2s ease;
}

.sg-back:hover,
.sg-back:focus {
    color: #fff;
    background: var(--sg-primary);
    text-decoration: none;
}

/* The configurator picture has its own loading indicator (sg-updating); custom.css also puts an animated
   GIF behind it (.imgcont), which showed through the dimmed picture as a second spinner. */
#myCarousel.imgcont {
    background: #e9ece9;
}


/* Configurator: spinner next to the logo while a new configuration loads (sg-motion.js places it level with
   the logo image; the header's layout is not touched). */
.one-page-header .navbar-brand {
    position: relative;
}

.sg-loading-spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(0, 0, 0, .12);
    border-top-color: var(--sg-primary);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    animation: sg-spin .8s linear infinite;
}

.sg-loading-spinner.sg-loading {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .sg-loading-spinner {
        animation-duration: 2.4s;
    }
}

/* Start page intro (text mpHomeText): the first paragraph as its headline,
   <span class="sg-intro-lead">…</span> at the start of the text. A short bar in the site colour above it,
   the headline as large as the section headings below, and a comfortable line length for the text. */
.sg-intro h2 {
    max-width: 780px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-wrap: pretty;   /* no single word on a paragraph's last line */
}

.sg-intro .sg-intro-lead {
    display: block;
    margin-bottom: 22px;
    font-size: clamp(28px, 2.7vw, 38px);
    font-weight: 300;
    line-height: 1.2;
    color: #111;
    text-wrap: balance;
}

.sg-intro .sg-intro-lead::before {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin: 0 auto 20px;
    border-radius: 2px;
    background: var(--sg-primary);
}

@media (max-width: 767px) {
    .sg-intro .sg-intro-lead {
        margin-bottom: 14px;
        font-size: 25px;
    }

    .sg-intro .sg-intro-lead::before {
        margin: 0 0 14px;   /* the intro is left-aligned on phones */
    }
}

/* References page: heading on the left, the two numbers large on the right, above the map. */
.sg-projects-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
    padding-top: 36px;
    padding-bottom: 28px;
}

.sg-projects-head::before,
.sg-projects-head::after {
    display: none;   /* Bootstrap's clearfix would become flex items */
}

.sg-projects-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sg-primary);
}

.sg-projects-eyebrow::before {
    content: "";
    flex: 0 0 32px;
    height: 3px;
    border-radius: 2px;
    background: var(--sg-primary);
}

.sg-projects-head h1 {
    margin: 0 0 18px;
    font-size: clamp(30px, 3.2vw, 46px);
    font-weight: 300;
    line-height: 1.1;
}

.sg-projects-jump {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--sg-primary);
    border: 2px solid var(--sg-primary);
    border-radius: 999px;
    transition: background-color .2s ease, color .2s ease;
}

.sg-projects-jump:hover,
.sg-projects-jump:focus {
    color: #fff;
    background: var(--sg-primary);
    text-decoration: none;
}

.sg-projects-jump span {
    transition: transform .2s ease;
}

.sg-projects-jump:hover span {
    transform: translateY(2px);
}

.sg-projects-stats {
    display: flex;
    gap: 40px;
    margin: 0;
}

.sg-projects-stats > div {
    padding-left: 18px;
    border-left: 3px solid var(--sg-primary);
}

.sg-projects-stats dt {
    font-size: clamp(34px, 3.6vw, 52px);
    font-weight: 700;
    line-height: 1;
    color: #111;
}

.sg-projects-stats dd {
    margin: 6px 0 0;
    font-size: 15px;
    color: #666;
}

/* Map legend: projects with a photo have the larger dots. */
.sg-map-wrap {
    position: relative;
}

.sg-map-legend {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 8px 14px;
    font-size: 13px;
    color: #333;
    background: rgba(255, 255, 255, .92);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    pointer-events: none;
}

.sg-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sg-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    background: #e5302a;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

.sg-dot.sg-dot-rich {
    width: 13px;
    height: 13px;
    border-width: 2.5px;
}

/* Search on the projects map (sg-map.js): field at the top left, hits in a list below it. */
.sg-map-search {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    width: min(340px, calc(100% - 70px));   /* room for the buttons on the right */
    font-size: 15px;
}

.sg-map-search input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 40px;
    font-size: 16px;   /* 16px: iPhone Safari does not zoom in */
    color: #222;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px 50%;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    -webkit-appearance: none;
    appearance: none;
}

.sg-map-search input:focus {
    outline: none;
    border-color: var(--sg-primary);
    box-shadow: 0 0 0 3px var(--sg-primary-shadow), 0 2px 10px rgba(0, 0, 0, .15);
}

.sg-map-search ul {
    margin: 6px 0 0;
    padding: 4px 0;
    max-height: 320px;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.sg-map-search li {
    padding: 8px 14px;
    line-height: 1.3;
    cursor: pointer;
}

.sg-map-search li strong {
    display: block;
    font-weight: 600;
    color: #111;
}

.sg-map-search li span {
    display: block;
    font-size: 13px;
    color: #666;
}

.sg-map-search li small {
    display: -webkit-box;
    margin-top: 2px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12.5px;
    line-height: 1.35;
    color: #777;
}

.sg-map-search li:hover,
.sg-map-search li.sg-map-search-active {
    background: #eef1ee;
}

.sg-map-search li.sg-map-search-none {
    color: #666;
    cursor: default;
    background: none;
}

/* List heading: left-aligned with a bar, like the section labels on the project pages. */
.sg-builds-head {
    margin-bottom: 36px;
}

.sg-builds-section .sg-builds-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 6px;
    text-align: left;
}

.sg-builds-section .sg-builds-title::before {
    content: "";
    flex: 0 0 36px;
    height: 3px;
    border-radius: 2px;
    background: var(--sg-primary);
}

.sg-builds-head p {
    width: auto;   /* custom.css gives every p width: 100%, which the indent pushed past the edge */
    margin: 0 0 0 50px;
    font-size: 16px;
    color: #666;
}

/* The newest project as a large card across two columns: photo left, text right (from tablet width, where
   the grid has two or three columns). */
@media (min-width: 768px) {
    .sg-builds > .sg-build:first-child {
        grid-column: span 2;
        flex-direction: row;
    }

    .sg-builds > .sg-build:first-child .sg-build-img {
        flex: 0 0 58%;
        aspect-ratio: auto;
        min-height: 100%;
    }

    .sg-builds > .sg-build:first-child .sg-build-body {
        justify-content: center;
        padding: 28px 30px;
    }

    .sg-builds > .sg-build:first-child .sg-build-body h3 {
        font-size: 26px;
    }

    .sg-builds > .sg-build:first-child .sg-build-body p {
        -webkit-line-clamp: 6;
        max-height: 9.3em;
    }
}

@media (max-width: 767px) {
    .sg-projects-head {
        align-items: flex-start;
        gap: 20px;
        padding-top: 24px;
        padding-bottom: 20px;
    }

    .sg-projects-stats {
        gap: 28px;
    }

    .sg-map-legend {
        left: 10px;
        bottom: 10px;
        font-size: 12px;
    }

    .sg-builds-head p {
        margin-left: 0;
    }
}

/* Header photo of the contact and privacy pages: 380px high, scaled down with the width below 1170px (as the
   slider it replaces did). */
.sg-page-banner {
    height: min(380px, 32.48vw);
    overflow: hidden;
    background: #e6e8e6;
}

.sg-page-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Contact pages (Views/Shared/_ContactPage.cshtml): label and heading as on the project pages, the form
   on the left, the company's details with a map on the right ---- */
.sg-contact-page {
    background: #fff;
}

.sg-contact {
    padding-top: 40px;
    padding-bottom: 80px;
}

.sg-contact-head {
    margin-bottom: 28px;
}

.sg-contact-head h1 {
    margin: 0;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 300;
    line-height: 1.15;
}

.sg-contact-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: 56px;
    align-items: start;
}

.sg-contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
    max-width: 720px;
}

/* Bot protection (App_Helpers/FormGuard.cs): the honeypot stays out of sight and out of the tab order; the
   Turnstile widget takes the form's width and only shows when a visitor has to click, so no space is kept for it. */
.sg-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sg-contact-wide {
    grid-column: 1 / -1;
}

.sg-contact-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.sg-required {
    color: #c62828;
}

.sg-contact-form .form-control {
    height: 46px;
    padding: 10px 14px;
    font-size: 16px;   /* 16px: iPhone Safari does not zoom in */
    color: #222;
    border: 1px solid #cfd6cf;
    border-radius: 8px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sg-contact-form textarea.form-control {
    height: auto;
    min-height: 170px;
    resize: vertical;
}

.sg-contact-form .form-control:focus {
    border-color: var(--sg-primary);
    box-shadow: 0 0 0 3px var(--sg-primary-shadow);
    outline: none;
}

.sg-contact-form .input-validation-error {
    border-color: #c62828;
}

.sg-contact-error {
    display: block;
    margin-top: 5px;
    font-size: 13.5px;
    color: #c62828;
}

.sg-contact-form .validation-summary-errors {
    grid-column: 1 / -1;
    color: #c62828;
}

.sg-contact-form .validation-summary-valid {
    display: none;
}

.sg-contact-form .btn-u {
    padding: 13px 30px;
    border-radius: 999px;
}

.sg-contact-sent {
    max-width: 720px;
    padding: 24px 28px;
    font-size: 18px;
    line-height: 1.55;
    color: #1d3b20;
    background: var(--sg-tint-strong);
    border-left: 4px solid var(--sg-primary);
    border-radius: 8px;
}

/* Thank-you message after an inquiry (Views/Shared/_InquirySent.cshtml): what happens next and where to go on. */
.sg-inquiry-sent p {
    margin: 0 0 12px;
}

.sg-inquiry-sent .sg-inquiry-sent-head {
    font-size: 22px;
    font-weight: 700;
}

.sg-inquiry-sent ol {
    margin: 0 0 16px;
    padding-left: 22px;
    font-size: 16px;
}

.sg-inquiry-sent li {
    margin-bottom: 4px;
}

.sg-inquiry-sent .sg-inquiry-sent-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
    font-size: 16px;
}

.sg-inquiry-sent-links a {
    font-weight: 600;
    color: var(--sg-primary);
    text-decoration: none;
}

.sg-inquiry-sent-links a:hover {
    text-decoration: underline;
}

.sg-contact-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3e7e3;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.sg-contact-map {
    height: 220px;
    background: #e6e8e6;
}

.sg-contact-card-body {
    padding: 22px 24px 24px;
    font-size: 15.5px;
    line-height: 1.6;
    color: #444;
}

.sg-contact-card-body strong {
    display: block;
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: 600;
    color: #111;
}

.sg-contact-card-body address {
    margin: 0 0 14px;
    font-style: normal;
}

.sg-contact-card-body ul {
    margin: 0;
    padding: 14px 0 0;
    list-style: none;
    border-top: 1px solid #e3e7e3;
}

.sg-contact-card-body li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 3px 0;
}

.sg-contact-card-body li .fa {
    width: 16px;
    text-align: center;
    color: var(--sg-accent);
}

.sg-contact-card-body a {
    color: #222;
}

.sg-contact-card-body a:hover {
    color: var(--sg-primary);
}

@media (max-width: 991px) {
    .sg-contact-body {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sg-contact-card {
        max-width: 520px;
    }
}

@media (max-width: 767px) {
    .sg-contact {
        padding-top: 24px;
        padding-bottom: 56px;
    }

    .sg-contact-form {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ---- Downloads page (Views/Shared/Downloads.cshtml): documents by group as cards with the cover ---- */
.sg-downloads-page {
    background: #fff;
}

.sg-downloads {
    padding-top: 40px;
    padding-bottom: 80px;
}

.sg-downloads-head {
    margin-bottom: 12px;
}

.sg-downloads-head h1 {
    margin: 0 0 10px;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 300;
    line-height: 1.15;
}

.sg-downloads-head p {
    margin: 0;
    font-size: 17px;
    color: #666;
}

.sg-downloads-group {
    margin-top: 44px;
}

.sg-downloads-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 300;
    color: #111;
}

.sg-downloads-title::before {
    content: "";
    flex: 0 0 32px;
    height: 3px;
    border-radius: 2px;
    background: var(--sg-primary);
}

.sg-downloads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 22px;
}

.sg-download {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: inherit;
    text-decoration: none !important;
    background: #fff;
    border: 1px solid #e3e7e3;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    transition: transform .25s var(--sg-ease), box-shadow .25s;
}

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

/* Covers are portrait (A4) or landscape (folded sheets): both shown whole on a light background. */
.sg-download-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    padding: 14px;
    background: #f1f3f1;
}

.sg-download-cover img {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.sg-download-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 14px 16px 16px;
}

.sg-download-body strong {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: #111;
}

.sg-download-text {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.45;
    color: #555;
}

.sg-download-meta {
    margin-top: auto;
    padding-top: 10px;
    font-size: 13px;
    color: var(--sg-primary);
    font-weight: 600;
}

@media (max-width: 767px) {
    .sg-downloads {
        padding-top: 24px;
        padding-bottom: 56px;
    }

    .sg-downloads-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .sg-download-cover {
        height: 140px;
        padding: 10px;
    }

    .sg-download-body {
        padding: 10px 12px 12px;
    }

    .sg-download-body strong {
        font-size: 14.5px;
    }

    .sg-download-text {
        display: none;   /* two columns on phones: title and size are enough */
    }
}

/* ---- Product pages of minispielfeld.de (Views/MiniPitch/Produkt.cshtml, Produkte.cshtml) ---- */
.sg-products-page,
.sg-product-page {
    background: #fff;
}

.sg-products {
    padding-top: 40px;
    padding-bottom: 80px;
}

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

.sg-products-compare {
    margin: 40px 0 0;
    font-size: 15.5px;
    color: #555;
}

.sg-products-compare a {
    font-weight: 600;
    color: var(--sg-primary);
}

/* Header photo with name and buttons, as the start page hero (sg-hero-overlay), about half the screen high. */
.sg-product-hero {
    position: relative;
    height: min(62vh, 620px);
    min-height: 360px;
    overflow: hidden;
    background: #1d1f1d;
}

.sg-product-hero > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sg-product-hero .sg-hero-overlay {
    padding-top: 160px;
}

.sg-product-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 8px;
}

.sg-product-nav a,
.sg-product-nav span {
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sg-primary);
    border: 1.5px solid #cfd6cf;
    border-radius: 999px;
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease;
}

.sg-product-nav a:hover,
.sg-product-nav a:focus {
    border-color: var(--sg-primary);
    text-decoration: none;
}

.sg-product-nav span {
    color: #fff;
    background: var(--sg-primary);
    border-color: var(--sg-primary);
}

.sg-product-figures {
    flex-wrap: wrap;
    gap: 24px 48px;
    margin: 36px 0 12px;
}

.sg-product-section {
    margin-top: 56px;
}

/* Section titles left-aligned with the bar, as the list heading on the references page. */
.sg-product-page .sg-builds-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 24px;
    text-align: left;
}

.sg-product-page .sg-builds-title::before {
    content: "";
    flex: 0 0 36px;
    height: 3px;
    border-radius: 2px;
    background: var(--sg-primary);
}

.sg-product-section p,
.sg-product-list li {
    width: auto;
    height: auto;   /* custom.css gives every p the width and height of its container */
    font-size: 17px;
    line-height: 1.65;
    color: #444;
}

.sg-product-intro p {
    max-width: 820px;
}

.sg-product-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 56px;
}

.sg-product-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-product-list li {
    position: relative;
    padding: 6px 0 6px 22px;
    border-bottom: 1px solid #eef1ee;
}

.sg-product-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 17px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sg-primary);
}

.sg-product-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-product-checks li {
    position: relative;
    padding-left: 32px;
    font-size: 16px;
    line-height: 1.55;
    color: #444;
}

.sg-product-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sg-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") no-repeat center / 13px;
}

.sg-product-footnote {
    margin: 22px 0 0;
    padding: 14px 18px;
    font-size: 15.5px !important;
    color: #333 !important;
    background: #f5f6f5;
    border-radius: 8px;
}

.sg-product-photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 56px;
}

.sg-product-photos figure {
    margin: 0;
}

.sg-product-photos img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
}

.sg-product-photos figcaption {
    margin-top: 8px;
    font-size: 14px;
    color: #666;
}

.sg-product-lead {
    max-width: 820px;
    margin-bottom: 22px;
}

.sg-product-sizes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
}

.sg-product-size {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    background: #f5f6f5;
    border-radius: 10px;
}

.sg-product-size strong {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: #111;
}

.sg-product-size span {
    font-size: 14.5px;
    line-height: 1.45;
    color: #555;
}

.sg-product-size .sg-product-size-goals {
    font-weight: 600;
    color: var(--sg-primary);
}

.sg-product-extensions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px 32px;
}

.sg-product-extensions strong {
    display: block;
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: 600;
    color: #111;
}

.sg-product-extensions p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
}

.sg-product-note {
    margin-top: 18px;
    font-size: 14px !important;
    color: #777 !important;
}

.sg-product-page > .container {
    padding-bottom: 64px;
}

.sg-product-cta {
    padding: 64px 0 72px;
    text-align: center;
    background: #fff;
}

.sg-product-cta h2 {
    margin: 0 0 10px;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 300;
}

.sg-product-cta p {
    margin: 0 0 24px;
    font-size: 17px;
    color: #555;
}

.sg-product-cta .sg-hero-actions {
    justify-content: center;
}

.sg-pill-link {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--sg-primary);
    border: 2px solid var(--sg-primary);
    border-radius: 999px;
    transition: background-color .2s ease, color .2s ease;
}

.sg-pill-link:hover,
.sg-pill-link:focus {
    color: #fff;
    background: var(--sg-primary);
    text-decoration: none;
}

@media (max-width: 991px) {
    .sg-product-columns,
    .sg-product-checks {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .sg-product-checks {
        gap: 12px;
    }
}

@media (max-width: 767px) {
    .sg-product-hero {
        height: 460px;
        min-height: 0;
    }

    .sg-product-section {
        margin-top: 44px;
    }

    .sg-product-figures {
        gap: 20px 28px;
    }

    .sg-product-sizes {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .sg-product-size {
        padding: 14px;
    }

    .sg-product-size strong {
        font-size: 21px;
    }
}

/* ---- News and service articles: the layout of the project pages (date or label, large light heading,
   rounded photo, text on white) with the list of further articles in a narrow column on the right ---- */
.sg-article-page {
    background: #fff;
}

.sg-article {
    padding-top: 40px;
    padding-bottom: 72px;
}

.sg-article-head {
    max-width: 900px;
    margin-bottom: 24px;
}

.sg-article-head h1 {
    margin: 0 0 8px;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 300;
    line-height: 1.15;
}

.sg-article-sub {
    margin: 0;
    font-size: 19px;
    line-height: 1.4;
    color: #666;
}

.sg-article-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 56px;
    align-items: start;
}

.sg-article-photo {
    margin-bottom: 32px;
    overflow: hidden;
    border-radius: 10px;
    background: #e6e8e6;
}

/* An article without a header image and without gallery photos shows no empty grey frame. */
.sg-article-photo:has(.active.item img[src=""]):not(:has(.item + .item)) {
    display: none;
}

.sg-article-photo .item img {
    display: block;
    width: 100%;
    max-height: calc(100vh - 160px);
    object-fit: cover;
}

.sg-article-text {
    max-width: 760px;
    font-size: 17px;
    line-height: 1.65;
    color: #444;
}

.sg-article-text p,
.sg-article-text li {
    font-size: 17px;
    line-height: 1.65;
    color: #444;
}

.sg-article-text h2 {
    margin: 44px 0 14px;
    font-size: clamp(23px, 2.2vw, 28px);
    font-weight: 300;
    line-height: 1.25;
    text-transform: none;
    color: #111;
}

.sg-article-text h3 {
    margin: 32px 0 10px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    color: #222;
}

.sg-article-text > h2:first-child,
.sg-article-text > h3:first-child {
    margin-top: 0;
}

.sg-article-text ul,
.sg-article-text ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.sg-article-text li + li {
    margin-top: 6px;
}

.sg-article-text img {
    max-width: 100%;
    height: auto;
    margin: 6px 0 14px;
    border-radius: 8px;
}

.sg-article-text a {
    color: var(--sg-primary);
    font-weight: 600;
}

.sg-article-main {
    grid-column: 1;
    grid-row: 1;
}

.sg-article-aside {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 110px;
}

.sg-article-aside .sg-project-label {
    line-height: 1.4;
}

.sg-article-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-article-list li + li {
    border-top: 1px solid #dfe3df;
}

.sg-article-list a {
    display: block;
    padding: 12px 0;
    color: inherit;
    text-decoration: none;
}

.sg-article-list strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #111;
    transition: color .2s ease;
}

.sg-article-list span {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.45;
    color: #666;
}

.sg-article-list a:hover strong,
.sg-article-list a:focus strong {
    color: var(--sg-primary);
}

@media (max-width: 991px) {
    .sg-article-body {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sg-article-aside {
        grid-column: 1;
        grid-row: 2;
        position: static;
        padding-top: 32px;
        border-top: 1px solid #dfe3df;
    }
}

@media (max-width: 767px) {
    .sg-article {
        padding-top: 24px;
        padding-bottom: 48px;
    }

    .sg-article-sub {
        font-size: 17px;
    }

    .sg-article-photo {
        margin-bottom: 24px;
        border-radius: 8px;
    }
}

/* Privacy policy (text PrivacyStatement): the same heading, a readable width and clear subheadings. */
.sg-legal {
    padding-top: 40px;
    padding-bottom: 72px;
}

.sg-legal > * {
    max-width: 860px;
}

.sg-legal h1 {
    margin: 0 0 28px;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 300;
    line-height: 1.15;
    color: #111;
}

.sg-legal h3 {
    margin: 32px 0 8px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    color: #222;
}

.sg-legal :is(h1, h2, h3, h4, h5):empty {
    display: none;   /* the text has a few empty headings used as spacers */
}

.sg-legal h4,
.sg-legal h5 {
    margin: 20px 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.sg-legal p,
.sg-legal li {
    font-size: 15.5px;
    line-height: 1.65;
    color: #444;
}

.sg-legal a {
    color: var(--sg-primary);
}

/* No scroll-behavior: smooth on html: together with the template's wheel script it stopped mouse-wheel
   scrolling in Chrome after a few pixels. */
#sg-latest {
    scroll-margin-top: calc(var(--sg-header-h, 70px) + 12px);
}

@media (max-width: 767px) {
    .sg-projects-head {
        padding-top: 18px;
        padding-bottom: 14px;
    }

    .sg-projects-head p {
        flex-direction: column;
        gap: 4px;
        font-size: 16px;
    }
}

/* The configurator's view dots are list items that switch the view. */
.sg-view-dots li {
    cursor: pointer;
}

/* ---- Per site (class on <html> in each layout; these were <style> blocks in the layouts). :where() adds no
   specificity, so these rules weigh exactly as much as before and buttons keep their own hover colours. ---- */
/* Configurator: the tick on a selected colour swatch. */
:where(.sg-site-portable) .labelimg > input:checked + img + i,
:where(.sg-site-cage) .labelimg > input:checked + img + i,
:where(.sg-site-minispielfeld) .labelimg > input:checked + img + i,
:where(.sg-site-soccerground) .labelimg > input:checked + img + i {
    color: #fff;
    background-color: #155f1c;
    position: relative;
    top: 38px;
    left: 8px;
    visibility: visible;
    padding: 7px;
    overflow: hidden;
    margin-left: -29px;
    border-radius: 15px;
}

:where(.sg-site-portable) .labelimg > input:checked + img + i,
:where(.sg-site-cage) .labelimg > input:checked + img + i {
    top: 53px;
}

/* Link hover in the product colour of the logo: Minispielfeld orange, Panna Cage magenta. */
:where(.sg-site-minispielfeld) a:hover,
:where(.sg-site-minispielfeld) .one-page-header .navbar-nav > li > a:hover,
:where(.sg-site-soccerground) a:hover,
:where(.sg-site-soccerground) .one-page-header .navbar-nav > li > a:hover {
    color: #f76326;
}

:where(.sg-site-cage) a:hover,
:where(.sg-site-cage) .one-page-header .navbar-nav > li > a:hover {
    color: #fe1bf6;
}

/* ---- Start page hero: its space is kept from the start (the slider is hidden until its script runs and
   then pushed the whole page down), with the first photo as background until the slider shows it
   (SlideShow.Preload). Heights as the slider sets them: phones fullwidth at 560/480 or 560/778 of the
   width, from 778 px the screen below the header, at most 900 px (sg-hero-limit). ---- */
.sg-hero {
    min-height: min(calc(100vh - 85px), 900px);
    background-color: #1d1f1d;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media (min-width: 778px) and (max-width: 991px) {
    .sg-hero {
        min-height: min(calc(100vh - 71px), 900px);
    }
}

@media (max-width: 777px) {
    .sg-hero {
        min-height: calc(100vw * 560 / 778);
    }
}

@media (max-width: 479px) {
    .sg-hero {
        min-height: calc(100vw * 560 / 480);
    }
}

/* Row photos have width/height attributes (space kept while they load); CSS keeps them fluid. */
.team-v7 .team-v7-img img {
    height: auto;
}

/* Desktop menu between 992 and 1199 px: a little tighter, so it stays next to the logo. */
@media (min-width: 992px) and (max-width: 1199px) {
    .one-page-header .navbar-nav > li > a {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
    }

    /* The English menu is longer ("Build your court", "Recent builds"): tighter still, and a slightly
       smaller logo. */
    html[lang^="en"] .one-page-header .navbar-nav > li > a {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 13px;
    }

    html[lang^="en"] .one-page-header .navbar-brand img {
        width: 200px;
    }
}

/* Start page of the merged site: all products, four per row */
@media (min-width: 1200px) {
    .sg-product-grid-all {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .sg-product-grid-all .sg-product-body strong {
        font-size: 19px;
    }

    .sg-product-grid-all .sg-product-body span {
        font-size: 14.5px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .sg-product-grid-all {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Configurators on the merged site: page head and the product choice as cards (_ConfiguratorChooser) */
.sg-config-head {
    padding: 36px 0 26px;
}

.sg-config-head h1 {
    margin: 10px 0 8px;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 300;
}

.sg-config-head p {
    max-width: 760px;
    margin: 0;
    color: #555;
}

.sg-config-choice {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.sg-site-soccerground a.sg-config-product {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    color: #333;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.sg-site-soccerground a.sg-config-product:hover,
.sg-site-soccerground a.sg-config-product:focus {
    color: #333;
    text-decoration: none;
    border-color: var(--sg-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.sg-config-product img {
    flex: none;
    width: 96px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
}

.sg-config-product strong {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #222;
}

.sg-config-product small {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.35;
    color: #666;
}

.sg-site-soccerground a.sg-config-product.is-current {
    padding: 9px;
    background: var(--sg-tint);
    border: 2px solid var(--sg-primary);
}

.sg-config-product.is-current::after {
    content: "\f00c";
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    font: 12px/24px FontAwesome;
    text-align: center;
    color: #fff;
    background: var(--sg-primary);
    border-radius: 50%;
}

@media (max-width: 991px) {
    .sg-config-choice {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ==== Configurators on the merged site: options in the new design ====
   Choices as pills, colour swatches as rounded tiles with a small tick, group labels like the other
   pages' section labels, the render with rounded corners and round arrows, the summary as a card. */
.sg-site-soccerground form.sky-form {
    border: 0;
}

.sg-site-soccerground #myCarousel {
    overflow: hidden;
    border-radius: 12px;
}

.sg-site-soccerground .carousel-v1 .carousel-arrow a i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    font-size: 22px;
    color: #222 !important;   /* the right arrow has an inline light grey in the configurator views */
    background: rgba(255, 255, 255, .85);
    border-radius: 50%;
    opacity: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    transition: background .2s ease;
}

.sg-site-soccerground .carousel-v1 .carousel-arrow a i:hover {
    background: #fff;
}

.sg-site-soccerground .carousel-v1 .carousel-arrow a.left i {
    left: 16px;
}

.sg-site-soccerground .carousel-v1 .carousel-arrow a.right i {
    right: 16px;
}

/* Group labels: "SPIELFELDGRÖSSE", then the chosen value */
.sg-site-soccerground .sky-form .plabel {
    margin: 0 0 10px !important;
    font-size: 14px;
    color: #666;
}

.sg-site-soccerground .sky-form .plabel b {
    margin-right: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sg-primary);
}

.sg-site-soccerground .sky-form .divhr {
    margin: 6px 0;
    border-top-color: #eee;
}

/* Radios and checkboxes as pills */
.sg-site-soccerground .sky-form label.radio,
.sg-site-soccerground .sky-form label.checkbox {
    display: flex;
    align-items: center;
    width: fit-content;
    min-height: 40px;
    margin: 0 8px 8px 0;
    padding: 7px 16px 7px 40px;
    font-size: 15px;
    line-height: 1.25;
    color: #333;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 999px;
    transition: border-color .2s ease, background .2s ease;
}

.sg-site-soccerground .sky-form label.radio:hover,
.sg-site-soccerground .sky-form label.checkbox:hover {
    border-color: var(--sg-primary);
}

.sg-site-soccerground .sky-form label.radio:has(input:checked),
.sg-site-soccerground .sky-form label.checkbox:has(input:checked) {
    font-weight: 600;
    color: var(--sg-primary);
    background: var(--sg-tint-strong);
    border-color: var(--sg-primary);
}

.sg-site-soccerground .sky-form label.radio i,
.sg-site-soccerground .sky-form label.checkbox i {
    top: 50%;
    left: 12px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border: 1px solid #bbb;
}

.sg-site-soccerground .sky-form label.checkbox i {
    border-radius: 5px;
}

.sg-site-soccerground .sky-form .radio input + i:after,
.sg-site-soccerground .sky-form .checkbox input + i:after {
    font-size: 11px;
    line-height: 18px;
}

/* Colour swatches: rounded tiles, the chosen one framed, with a small tick in its corner */
.sg-site-soccerground .labelimg {
    position: relative;
    display: inline-block;
    margin: 0 6px 6px 0;
}

.sg-site-soccerground .labelimg > input + img {
    margin: 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: box-shadow .2s ease;
}

.sg-site-soccerground .labelimg:hover > input + img {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.sg-site-soccerground .labelimg > input:checked + img {
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--sg-primary);
}

.sg-site-soccerground .labelimg > input:checked + img + i {
    position: absolute;
    top: -7px;
    right: -7px;
    left: auto;
    width: 22px;
    height: 22px;
    margin: 0;
    font-size: 11px;
    box-shadow: 0 0 0 2px #fff;
}

.sg-site-soccerground .sky-form section:has(.labelimg),
.sg-site-soccerground .sky-form [class*="col-"]:has(> label.labelimg) {
    padding-bottom: 8px;
}

/* Day/night switch (floodlight) as a rounded segmented control */
.sg-site-soccerground .switch-field label {
    width: auto;
    min-width: 64px;
    padding: 6px 14px;
    font-size: 13px;
    background: rgba(255, 255, 255, .92);
}

.sg-site-soccerground .switch-field label:first-of-type {
    border-radius: 999px 0 0 999px;
}

.sg-site-soccerground .switch-field label:last-of-type {
    border-radius: 0 999px 999px 0;
}

.sg-site-soccerground .switch-field input:checked + label {
    background: var(--sg-primary);
}

/* Summary of the configuration as a card, and the request button */
.sg-site-soccerground .sky-form .row:has(> .col-sm-12 > h2) {
    margin: 22px 0 0;
    padding: 22px 12px 18px;
    background: var(--sg-tint);
    border-radius: 12px;
}

.sg-site-soccerground .sky-form .row:has(> .col-sm-12 > h2) h2 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 300;
}

.sg-site-soccerground .sky-form .row:has(> .col-sm-12 > h2) p {
    margin: 0;
    color: #555;
}

.sg-site-soccerground a.btn.btn-u[onclick] {
    margin-top: 18px;
    padding: 13px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 999px;
}

/* "Download as PDF" next to the quote button: the outline pill */
.sg-site-soccerground a.btn.sg-config-pdf {
    margin: 18px 0 0 10px;
    padding: 11px 26px;
    font-size: 16px;
    font-weight: 600;
    color: var(--sg-primary);
    background: #fff;
    border: 2px solid var(--sg-primary);
    border-radius: 999px;
}

.sg-site-soccerground a.btn.sg-config-pdf:hover,
.sg-site-soccerground a.btn.sg-config-pdf:focus {
    color: #fff;
    background: var(--sg-primary);
}

@media (max-width: 480px) {
    .sg-site-soccerground a.btn.sg-config-pdf {
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    .sg-site-soccerground .sky-form .row:has(> .col-sm-12 > h2) h2 {
        font-size: 20px;
        hyphens: manual;
    }

    .sg-config-head {
        padding: 22px 0 16px;
    }

    .sg-config-choice {
        gap: 8px;
        margin-top: 16px;
    }

    .sg-site-soccerground a.sg-config-product {
        padding: 6px 10px 6px 6px;
    }

    .sg-site-soccerground a.sg-config-product.is-current {
        padding: 5px 9px 5px 5px;
    }

    .sg-config-product img {
        width: 64px;
        height: 44px;
    }

    .sg-config-product strong {
        font-size: 14.5px;
    }

    .sg-config-product small {
        display: none;
    }
}

/* Inquiry form of the configurators on the merged site (Configurator/Anfrage and Sent, in a frame) */
html.sg-inquiry body {
    padding: 4px 4px 12px;
    background: #fff;
}

.sg-inquiry-title {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 300;
}

.sg-inquiry-lead {
    margin: 0 0 20px;
    color: #555;
}

html.sg-inquiry .sg-contact-form {
    max-width: none;
}

@media (max-width: 600px) {
    html.sg-inquiry .sg-contact-form {
        grid-template-columns: 1fr;
    }
}

/* Configurator intro: the three steps with round numbers */
.sg-config-head .sg-config-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    max-width: none;
}

.sg-config-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sg-config-step b {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--sg-primary);
    background: var(--sg-tint-strong);
    border-radius: 50%;
}

.sg-config-step-arrow {
    color: #999;
}

@media (max-width: 767px) {
    .sg-config-head .sg-config-steps {
        flex-direction: column;
        align-items: flex-start;
    }

    .sg-config-step-arrow {
        display: none;
    }
}

/* ==== Header of the merged site (_SoccerGroundNav): menu, products panel, language, "get a quote" ==== */
.sg-nav.one-page-header {
    margin: 0;
    background: #fff;
    border: 0;
}

.sg-nav-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 84px;
    transition: height .3s var(--sg-ease, ease);
}

.sg-scrolled .sg-nav-bar {
    height: 66px;
}

.sg-nav .navbar-brand.sg-nav-logo {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    float: none;
    height: auto;
    margin: 0;
    padding: 0;
}

.sg-nav .navbar-brand.sg-nav-logo img {
    width: 230px;
    margin: 0;
}

.sg-scrolled .sg-nav .navbar-brand.sg-nav-logo img {
    width: 190px;
}

.sg-nav-menu {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-left: 16px;
}

.sg-nav-links {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-nav .sg-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 12px;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #2b2f2b;
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: none;
}

.sg-nav .sg-nav-link:hover,
.sg-nav .sg-nav-link:focus-visible,
.sg-nav .sg-nav-link.is-current,
.sg-nav .is-open > .sg-nav-link {
    color: var(--sg-primary);
    text-decoration: none;
}

/* A thin line under the current section and on hover */
.sg-nav-links .sg-nav-link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 2px;
    background: var(--sg-primary);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform .25s ease;
}

.sg-nav-links .sg-nav-link:hover::after,
.sg-nav-links .sg-nav-link.is-current::after,
.sg-nav-links .is-open > .sg-nav-link::after {
    transform: scaleX(1);
}

.sg-nav-chevron {
    width: 7px;
    height: 7px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
}

.sg-nav .is-open > .sg-nav-link .sg-nav-chevron {
    transform: translateY(1px) rotate(-135deg);
}

/* Panels (products, language) */
.sg-nav-panel {
    position: absolute;
    top: 100%;
    z-index: 5;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.sg-nav .is-open > .sg-nav-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s ease, transform .2s ease;
}

.sg-nav-has-panel:not(.sg-nav-lang) > .sg-nav-panel {
    left: 15px;
    right: 15px;
    padding: 18px 18px 16px;
}

.sg-nav-products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.sg-nav .sg-nav-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    color: #222;
    border-radius: 10px;
    text-decoration: none;
    transition: background .15s ease;
}

.sg-nav .sg-nav-product:hover,
.sg-nav .sg-nav-product:focus-visible {
    color: #222;
    background: var(--sg-tint);
    text-decoration: none;
}

.sg-nav-product img {
    flex: none;
    width: 76px;
    height: 54px;
    object-fit: cover;
    border-radius: 7px;
}

.sg-nav-product strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.sg-nav-product small {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.35;
    color: #666;
}

.sg-nav .sg-nav-all {
    display: inline-block;
    margin: 12px 8px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--sg-primary);
}

.sg-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sg-nav-lang {
    position: relative;
}

.sg-nav-langlist {
    right: 0;
    min-width: 270px;
    margin: 6px 0 0;
    padding: 8px;
    list-style: none;
}

.sg-nav .sg-nav-langlist a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    font-size: 15px;
    color: #333;
    border-radius: 8px;
    text-decoration: none;
}

.sg-nav .sg-nav-langlist a:hover {
    color: #333;
    background: var(--sg-tint);
}

.sg-nav-langlist span {
    width: 26px;
    font-weight: 700;
    color: #999;
}

.sg-nav-langlist em {
    font-style: normal;
}

.sg-nav .sg-nav-langlist a.is-current,
.sg-nav .sg-nav-langlist a.is-current span {
    font-weight: 600;
    color: var(--sg-primary);
}

.sg-nav .sg-nav-cta {
    padding: 11px 22px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    background: var(--sg-primary);
    border-radius: 999px;
    text-decoration: none;
    transition: filter .2s ease, box-shadow .2s ease;
}

.sg-nav .sg-nav-cta:hover,
.sg-nav .sg-nav-cta:focus-visible {
    color: #fff;
    filter: brightness(.9);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
    text-decoration: none;
}

.sg-nav-toggle {
    display: none;
}

/* Up to 1199px: the menu as a panel from the side */
@media (max-width: 1199px) {
    .sg-nav-bar {
        height: 72px;
    }

    .sg-scrolled .sg-nav-bar {
        height: 60px;
    }

    .sg-nav .navbar-brand.sg-nav-logo img,
    .sg-scrolled .sg-nav .navbar-brand.sg-nav-logo img {
        width: 190px;
    }

    .sg-nav-toggle {
        position: relative;
        z-index: 3;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        margin-left: auto;
        padding: 10px;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .sg-nav-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: #2b2f2b;
        border-radius: 2px;
        transition: transform .25s ease, opacity .2s ease;
    }

    .sg-nav.is-menu-open .sg-nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .sg-nav.is-menu-open .sg-nav-toggle span:nth-child(2) {
        opacity: 0;
    }

    .sg-nav.is-menu-open .sg-nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .sg-nav::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1;
        background: rgba(0, 0, 0, .35);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
    }

    .sg-nav.is-menu-open::after {
        opacity: 1;
        pointer-events: auto;
    }

    .sg-nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        width: min(380px, 88vw);
        margin: 0;
        padding: 76px 24px 28px;
        overflow-y: auto;
        background: #fff;
        box-shadow: -10px 0 30px rgba(0, 0, 0, .12);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .3s var(--sg-ease, ease), visibility 0s linear .3s;
    }

    .sg-nav.is-menu-open .sg-nav-menu {
        transform: none;
        visibility: visible;
        transition: transform .3s var(--sg-ease, ease);
    }

    .sg-nav-links {
        flex-direction: column;
        gap: 0;
    }

    .sg-nav .sg-nav-links .sg-nav-link {
        justify-content: space-between;
        width: 100%;
        padding: 15px 2px;
        font-size: 18px;
        border-bottom: 1px solid #eee;
    }

    .sg-nav-links .sg-nav-link::after {
        display: none;
    }

    .sg-nav-panel,
    .sg-nav-has-panel:not(.sg-nav-lang) > .sg-nav-panel {
        position: static;
        display: none;
        padding: 6px 0 12px;
        box-shadow: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .sg-nav .is-open > .sg-nav-panel {
        display: block;
    }

    .sg-nav-products {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .sg-nav-product img {
        width: 60px;
        height: 42px;
    }

    .sg-nav-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 18px;
        margin-top: 26px;
    }

    .sg-nav .sg-nav-cta {
        padding: 14px 22px;
        text-align: center;
    }

    /* Languages as three buttons */
    .sg-nav-lang > .sg-nav-link {
        display: none;
    }

    .sg-nav .sg-nav-lang > .sg-nav-langlist {
        display: flex;
        gap: 8px;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .sg-nav .sg-nav-langlist a {
        padding: 8px 16px;
        border: 1px solid #ddd;
        border-radius: 999px;
    }

    .sg-nav .sg-nav-langlist a.is-current {
        border-color: var(--sg-primary);
    }

    .sg-nav-langlist span {
        width: auto;
        color: inherit;
    }

    .sg-nav-langlist em {
        display: none;
    }

    html.sg-nav-locked {
        overflow: hidden;
    }
}

/* Product overview grouped by use (Produkte.cshtml) */
.sg-products-group {
    margin: 48px 0 0;
}

.sg-products-group + .sg-products-grid {
    margin-top: 18px;
}

/* Product overview: a short text under each group heading; groups with one or two products centre their cards */
.sg-products-group-intro {
    max-width: 680px;
    margin: 10px auto 0;
    text-align: center;
    color: #5f6b66;
    font-size: 16.5px;
    line-height: 1.6;
}

.sg-products-grid.sg-products-few {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.sg-products-few > .sg-product-tile {
    flex: 0 1 calc((100% - 56px) / 3);
    min-width: 300px;
}

@media (max-width: 700px) {
    .sg-products-few > .sg-product-tile {
        flex-basis: 100%;
        min-width: 0;
    }
}

.sg-products-group-intro + .sg-products-grid {
    margin-top: 24px;
}

/* Start page rows (Views/MiniPitch/_HomeContent.cshtml) in the design of the product pages: rounded photo
   beside the text with room between them, no arrow notches, a short bar in the site colour above each
   heading; every second row has the photo on the right. */
.sg-home-rows {
    padding-bottom: 72px;
}

.sg-home-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 64px;
    margin-top: 72px;
}

.sg-home-row:first-child {
    margin-top: 24px;
}

.sg-home-row-flip .sg-home-photo {
    order: 2;
}

.sg-home-photo {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.sg-home-photo a {
    display: block;
}

.sg-home-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .9s var(--sg-ease);
}

.sg-home-photo:hover img {
    transform: scale(1.03);
}

.sg-home-text .sg-row-head {
    margin: 0 0 10px;
    font-size: clamp(27px, 2.6vw, 36px);
    font-weight: 300;
    line-height: 1.2;
    color: #111;
    text-wrap: balance;
}

.sg-home-text .sg-row-head::before {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-bottom: 20px;
    border-radius: 2px;
    background: var(--sg-primary);
}

.sg-home-text .sg-row-sub {
    margin: 0 0 14px;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--sg-accent);
}

.sg-home-text p {
    width: auto;
    height: auto;   /* custom.css gives every p the width and height of its container */
    margin: 0;
    font-size: 17px;
    line-height: 1.65;
    color: #444;
    text-wrap: pretty;
}

.sg-home-text .sg-home-seals {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}

.sg-home-text .sg-home-actions {
    margin-top: 26px;
}

@media (max-width: 991px) {
    .sg-home-row {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 56px;
    }

    .sg-home-row-flip .sg-home-photo {
        order: 0;
    }

    .sg-home-rows {
        padding-bottom: 56px;
    }
}

@media (max-width: 767px) {
    .sg-home-row {
        margin-top: 44px;
    }

    .sg-home-text .sg-row-head::before {
        margin-bottom: 14px;
    }

    .sg-home-text .sg-row-sub {
        font-size: 18px;
    }

    .sg-home-text p {
        font-size: 16.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sg-home-photo img {
        transition: none;
    }

    .sg-home-photo:hover img {
        transform: none;
    }
}

/* Header without animation while the page loads (sg-instant, set by sg-motion.js until shortly after load):
   a reload restores the scroll position after the first paint, and the shrinking header slid the menu sideways. */
.sg-instant .one-page-header,
.sg-instant .one-page-header * {
    transition: none !important;
}

/* Configurator end on soccerground.com: the visitor's design as PDF is the main button (filled), the inquiry
   the second one (outline). The phone bar keeps its filled button. */
.sg-site-soccerground a.btn.sg-config-pdf.sg-config-main {
    margin: 18px 10px 0 0;
    padding: 13px 28px;
    border: 0;
}

.sg-site-soccerground a.btn.btn-u.sg-config-talk:not(.sg-config-bar a) {
    margin-top: 18px;
    padding: 11px 26px;
    font-size: 16px;
    font-weight: 600;
    color: var(--sg-primary) !important;
    background: #fff !important;
    border: 2px solid var(--sg-primary);
    border-radius: 999px;
    box-shadow: none;
}

.sg-site-soccerground a.btn.btn-u.sg-config-talk:not(.sg-config-bar a):hover,
.sg-site-soccerground a.btn.btn-u.sg-config-talk:not(.sg-config-bar a):focus {
    color: #fff !important;
    background: var(--sg-primary) !important;
}

/* Spare parts for DFB mini-pitches (Views/SpareParts, Content/js/sg-parts.js): list, part page and cart. */
.sg-parts-page {
    padding: 48px 0 80px;
}

.sg-parts-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.sg-parts-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 40px;
    margin-bottom: 28px;
}

.sg-parts-head h1 {
    margin: 6px 0 12px;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 300;
}

.sg-parts-lead {
    max-width: 760px;
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: #555;
}

.sg-parts-cartlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--sg-primary);
    background: #fff;
    border: 2px solid var(--sg-primary);
    border-radius: 999px;
    white-space: nowrap;
}

.sg-parts-cartlink:hover,
.sg-parts-cartlink:focus {
    color: #fff;
    background: var(--sg-primary);
    text-decoration: none;
}

.sg-parts-count {
    min-width: 22px;
    padding: 1px 7px;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    background: var(--sg-primary);
    border-radius: 999px;
}

.sg-parts-cartlink:hover .sg-parts-count,
.sg-parts-cartlink:focus .sg-parts-count {
    color: var(--sg-primary);
    background: #fff;
}

/* The floating copy of the cart button (sg-parts.js), once the page's own one has scrolled away. */
.sg-parts-cartfloat {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    padding: 13px 24px;
    font-size: 16px;
    color: #fff;
    background: var(--sg-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    animation: sg-rise .3s var(--sg-ease) both;
}

.sg-parts-cartfloat[hidden] {
    display: none;
}

.sg-parts-cartfloat:hover,
.sg-parts-cartfloat:focus {
    color: #fff;
    background: var(--sg-primary-dark);
}

.sg-parts-cartfloat .sg-parts-count,
.sg-parts-cartfloat:hover .sg-parts-count,
.sg-parts-cartfloat:focus .sg-parts-count {
    color: var(--sg-primary);
    background: #fff;
}

@media (max-width: 767px) {
    .sg-parts-cartfloat {
        right: 16px;
        bottom: 16px;
    }
}

.sg-parts-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.sg-parts-groups a {
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sg-primary);
    background: var(--sg-tint);
    border-radius: 999px;
}

.sg-parts-groups a:hover,
.sg-parts-groups a:focus {
    background: var(--sg-tint-strong);
    text-decoration: none;
}

.sg-parts-group {
    margin-bottom: 44px;
    scroll-margin-top: 90px;
}

.sg-parts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    margin-top: 14px;
}

.sg-part {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3e6e3;
    border-radius: 10px;
}

.sg-part-img {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f1f2f1;
}

.sg-part-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .4s var(--sg-ease);
}

.sg-part-img:hover img {
    transform: scale(1.03);
}

.sg-part-nophoto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 160px;
    font-size: 14px;
    color: #888;
}

.sg-part-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 14px 16px 16px;
}

.sg-part-body h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.sg-part-body h3 a {
    color: inherit;
}

.sg-part-sku {
    display: block;
    margin: 0 0 12px;
    font-size: 13px;
    color: #777;
}

.sg-part-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}

.sg-part-price {
    font-size: 17px;
    font-weight: 700;
    color: #1d2321;
}

.sg-part-add {
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--sg-primary);
    border: 2px solid var(--sg-primary);
    border-radius: 999px;
    transition: background-color .2s ease;
}

.sg-part-add:hover,
.sg-part-add:focus,
.sg-part-add.is-added {
    color: #fff;
    background: #0d4313;
    border-color: #0d4313;
}

.sg-parts-help {
    margin: 10px 0 0;
    padding: 20px 24px;
    font-size: 16px;
    background: var(--sg-tint);
    border-radius: 10px;
}

/* A part's own page: photo left, details right (stacked on phones). */
.sg-part-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.sg-part-photo {
    overflow: hidden;
    background: #f1f2f1;
    border-radius: 10px;
}

.sg-part-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.sg-part-photo .sg-part-nophoto {
    aspect-ratio: 4 / 3;
}

.sg-part-info h1 {
    margin: 6px 0 6px;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 400;
    line-height: 1.3;
}

.sg-part-info > p {
    font-size: 16px;
    line-height: 1.6;
}

.sg-part-price-large {
    margin: 18px 0 0;
    font-size: 28px;
}

.sg-part-vat {
    margin: 0 0 18px;
    font-size: 14px !important;
    color: #777;
}

.sg-part-order {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 24px 0 14px;
}

.sg-part-order label {
    margin: 0;
    font-weight: 600;
}

.sg-part-qty.form-control {
    width: 84px;
    height: 42px;
    font-size: 16px;
    text-align: center;
}

.sg-part-add-large {
    padding: 10px 26px;
    font-size: 16px;
}

.sg-part-note {
    margin-top: 10px;
    font-size: 14px !important;
    color: #666;
}

/* Cart. */
.sg-cart-empty {
    font-size: 17px;
}

.sg-cart-table {
    width: 100%;
    margin-bottom: 40px;
    border-collapse: collapse;
}

.sg-cart-table th {
    padding: 0 12px 10px 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #777;
    border-bottom: 2px solid #e3e6e3;
}

.sg-cart-table td {
    padding: 14px 12px 14px 0;
    vertical-align: middle;
    border-bottom: 1px solid #e3e6e3;
}

.sg-cart-photo {
    width: 84px;
}

.sg-cart-photo img {
    display: block;
    width: 72px;
    height: 54px;
    object-fit: contain;
    background: #f1f2f1;
    border-radius: 6px;
}

.sg-cart-name a {
    display: block;
    font-weight: 600;
    color: #1d2321;
}

.sg-cart-name .sg-part-sku {
    margin: 2px 0 0;
}

.sg-cart-num {
    text-align: right;
    white-space: nowrap;
}

.sg-cart-remove button {
    width: 34px;
    height: 34px;
    font-size: 20px;
    line-height: 1;
    color: #777;
    background: none;
    border: 1px solid #ddd;
    border-radius: 50%;
}

.sg-cart-remove button:hover,
.sg-cart-remove button:focus {
    color: #b42318;
    border-color: #b42318;
}

.sg-cart-table tfoot td {
    font-size: 17px;
    font-weight: 700;
    border-bottom: 0;
}

.sg-cart-table tfoot .sg-cart-vat td {
    padding-top: 0;
    font-size: 14px;
    font-weight: 400;
    color: #777;
}

/* Goods value and small-order surcharge above the total (only below the limit). */
.sg-cart-table tfoot .sg-cart-sub td {
    padding-bottom: 0;
    font-size: 15px;
    font-weight: 400;
}

.sg-cart-hint {
    display: block;
    font-size: 13px;
    color: #777;
}

.sg-cart-order .sg-parts-lead {
    margin-bottom: 24px;
}

@media (max-width: 767px) {
    .sg-parts-page {
        padding-top: 28px;
    }

    .sg-parts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .sg-part-body {
        padding: 10px 12px 12px;
    }

    .sg-part-body h3 {
        font-size: 14px;
    }

    .sg-part-add {
        width: 100%;
    }

    .sg-part-page {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .sg-cart-photo,
    .sg-cart-table thead {
        display: none;
    }

    .sg-cart-table td {
        padding-right: 8px;
    }
}

/* Contact page: the line under the heading with the promised answer (Views/Shared/_ContactPage.cshtml). */
.sg-contact-head .sg-contact-lead {
    max-width: 640px;
    margin: 10px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: #555;
}

/* ---- Sizes page (Views/MiniPitch/Sizes.cshtml): the popular sizes as a table, then as cards with a drawing
   to scale inside the largest size, the FAQ and the way to the configurator ---- */
.sg-sizes-page {
    padding: 40px 0 72px;
    background: #fff;
}

.sg-sizes-head {
    max-width: 860px;
    margin-bottom: 28px;
}

.sg-sizes-head h1 {
    margin: 0 0 12px;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 300;
    line-height: 1.15;
}

.sg-sizes-lead {
    margin: 0;
    font-size: 19px;
    line-height: 1.5;
    color: #555;
}

.sg-sizes-tablewrap {
    position: relative;
    overflow-x: auto;
    border: 1px solid #dfe3df;
    border-radius: 10px;
}

.sg-sizes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.sg-sizes-table th,
.sg-sizes-table td {
    padding: 13px 16px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #e8ebe8;
}

.sg-sizes-table th {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #666;
    background: var(--sg-tint);
}

.sg-sizes-table tbody tr:last-child td {
    border-bottom: 0;
}

.sg-sizes-table tr.is-standard td {
    background: var(--sg-tint-strong);
}

.sg-sizes-table td a {
    color: var(--sg-primary);
}

.sg-sizes-action {
    text-align: right !important;
    font-weight: 600;
}

.sg-sizes-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 9px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    color: #fff;
    vertical-align: middle;
    background: var(--sg-primary);
    border-radius: 999px;
}

.sg-sizes-note {
    max-width: 860px;
    margin: 12px 0 48px;
    font-size: 15px;
    line-height: 1.5;
    color: #666;
}

.sg-sizes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 64px;
}

.sg-size {
    display: grid;
    grid-template-rows: auto auto auto 1fr auto auto;
    min-width: 0;
    padding: 22px;
    background: #fff;
    border: 1px solid #dfe3df;
    border-radius: 12px;
    scroll-margin-top: 110px;
}

.sg-size.is-standard {
    border: 2px solid var(--sg-primary);
}

.sg-size-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.sg-size-head h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
}

.sg-size-head .sg-sizes-badge {
    margin-left: 0;
}

.sg-size-plan {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    margin-bottom: 16px;
}

.sg-size-frame {
    fill: var(--sg-tint);
    stroke: #c5cbc5;
    stroke-width: 1.5;
    stroke-dasharray: 6 5;
}

.sg-size-field {
    fill: var(--sg-primary);
}

.sg-size-line {
    fill: none;
    stroke: rgba(255, 255, 255, .7);
    stroke-width: 1.5;
}

.sg-size-goal {
    fill: #fff;
    stroke: var(--sg-primary);
    stroke-width: 1;
}

.sg-size-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px;
}

.sg-size-facts div {
    padding: 8px 10px;
    background: var(--sg-tint);
    border-radius: 8px;
}

.sg-size-facts dt {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #777;
}

.sg-size-facts dd {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #111;
}

.sg-size > p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.55;
    color: #444;
}

.sg-size-photo {
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: #e6e8e6;
    border-radius: 8px;
}

.sg-size-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sg-size-cta {
    margin-top: 14px;
    font-weight: 600;
    color: var(--sg-primary);
}

.sg-sizes-faq {
    max-width: 860px;
    margin-bottom: 56px;
}

.sg-sizes-faq details {
    border-bottom: 1px solid #dfe3df;
}

.sg-sizes-faq summary {
    padding: 16px 32px 16px 0;
    font-size: 18px;
    font-weight: 600;
    color: #111;
    cursor: pointer;
    list-style: none;
    position: relative;
}

.sg-sizes-faq summary::-webkit-details-marker {
    display: none;
}

.sg-sizes-faq summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 12px;
    font-size: 24px;
    font-weight: 300;
    color: var(--sg-primary);
}

.sg-sizes-faq details[open] summary::after {
    content: "\2212";
}

.sg-sizes-faq details p {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

.sg-sizes-more {
    margin-top: 18px;
    font-weight: 600;
}

.sg-sizes-more a {
    color: var(--sg-primary);
}

.sg-sizes-cta {
    margin-bottom: 56px;
    padding: 36px;
    background: var(--sg-tint-strong);
    border-radius: 12px;
}

.sg-sizes-cta h2 {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 300;
}

.sg-sizes-cta p {
    max-width: 680px;
    font-size: 17px;
    line-height: 1.55;
    color: #444;
}

.sg-sizes-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 20px 0 0;
}

.sg-sizes-buttons .sg-back {
    margin: 0;
}

/* The list of the other service articles, below the page instead of beside it. */
.sg-sizes-service .sg-article-aside {
    position: static;
    padding-top: 32px;
    border-top: 1px solid #dfe3df;
}

@media (min-width: 768px) {
    .sg-sizes-service .sg-article-list {
        columns: 2;
        column-gap: 48px;
    }

    .sg-sizes-service .sg-article-list li {
        break-inside: avoid;
    }

    .sg-sizes-service .sg-article-list li + li {
        border-top: 0;
    }
}

@media (max-width: 767px) {
    .sg-sizes-page {
        padding-top: 28px;
    }

    .sg-sizes-table th,
    .sg-sizes-table td {
        padding: 11px 12px;
        font-size: 15px;
        white-space: normal;
    }

    /* The area is on the cards; without it and the link column the table fits a phone. */
    .sg-sizes-table th:nth-child(2),
    .sg-sizes-table td:nth-child(2),
    .sg-sizes-table th:nth-child(5),
    .sg-sizes-table td:nth-child(5) {
        display: none;
    }

    .sg-sizes-table .sg-sizes-badge {
        display: block;
        width: max-content;
        white-space: nowrap;
        margin: 4px 0 0;
    }

    .sg-sizes-table td:first-child {
        white-space: nowrap;
    }

    .sg-sizes-grid {
        grid-template-columns: 1fr;
    }

    .sg-sizes-cta {
        padding: 24px 20px;
    }
}

/* ---- "Page not found" (Views/SoccerGround/NotFound.cshtml) ---- */
.sg-notfound {
    padding: 72px 0 200px;   /* room below the links, so the footer does not follow at once */
    background: #fff;
}

@media (max-width: 767px) {
    .sg-notfound {
        padding: 48px 0 120px;
    }
}

.sg-notfound h1 {
    margin: 0 0 12px;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 300;
    line-height: 1.15;
}

.sg-notfound-lead {
    max-width: 640px;
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 1.5;
    color: #555;
}

.sg-notfound-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.sg-notfound-buttons .sg-back {
    margin: 0;
}

/* ---- Preview of the new start page (Views/SoccerGround/StartNew.cshtml) ---- */
.sg-start {
    background: #fff;
}

.sg-start .sg-builds-head {
    margin-bottom: 28px;
}

.sg-start-proof {
    padding: 40px 0 8px;
}

.sg-start-stats {
    flex-wrap: wrap;
    gap: 24px 40px;
    margin-bottom: 28px;
}

/* Section titles are centred; their intros too, and the sizes block is left-aligned in its column. */
.sg-start .sg-builds-head {
    text-align: center;
}

.sg-start .sg-builds-head p {
    max-width: 640px;
    margin: 0 auto;
}

.sg-start-sizes-text .sg-builds-title {
    justify-content: flex-start;
    text-align: left;
}

.sg-start-names {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid #dfe3df;
    font-size: 15px;
    color: #555;
}

.sg-start-names-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-primary);
    margin-right: 6px;
}

.sg-start-name {
    padding: 4px 12px;
    font-size: 14px;
    color: #444;
    background: var(--sg-tint);
    border-radius: 999px;
}

.sg-start-products,
.sg-start-systems,
.sg-start-why,
.sg-start-sizes,
.sg-start-contact {
    padding: 56px 0;
}

.sg-start-references {
    margin: 0;
}

/* Eight product tiles in two rows of four on wide screens. */
@media (min-width: 1200px) {
    .sg-start-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.sg-start-systems {
    background: var(--sg-tint);
}

.sg-start-systems-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.sg-start-system {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    color: inherit;
    background: #fff;
    border: 1px solid #dfe3df;
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .2s ease, transform .25s var(--sg-ease);
}

.sg-start-system:hover,
.sg-start-system:focus {
    color: inherit;
    text-decoration: none;
    border-color: var(--sg-primary);
    transform: translateY(-2px);
}

.sg-start-system h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

.sg-start-system p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #444;
}

.sg-start-system-where {
    font-size: 14px;
    color: #666;
}

.sg-start-system .sg-build-more {
    margin-top: auto;
}

.sg-start-note {
    margin: 24px 0 0;
    font-size: 15px;
    color: #555;
}

.sg-start-note a {
    font-weight: 600;
    color: var(--sg-primary);
}

.sg-start-why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.sg-start-why-mark {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sg-primary);
    background: var(--sg-tint-strong);
    border-radius: 999px;
}

.sg-start-why-item h3 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 600;
}

.sg-start-why-item p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #444;
}

.sg-start-sizes {
    background: var(--sg-tint);
}

.sg-start-sizes-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.sg-start-sizes-text .sg-builds-title {
    margin-bottom: 12px;
}

.sg-start-sizes-text > p {
    max-width: 520px;
    font-size: 16px;
    line-height: 1.55;
    color: #444;
}

.sg-start-sizes-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin: 20px 0 24px;
    padding: 0;
    list-style: none;
}

.sg-start-sizes-list li {
    padding: 10px 14px;
    background: #fff;
    border-radius: 8px;
}

.sg-start-sizes-list strong {
    display: block;
    font-size: 18px;
}

.sg-start-sizes-list span {
    font-size: 14px;
    color: #666;
}

.sg-start-configurator {
    padding: 32px;
    background: var(--sg-primary);
    border-radius: 12px;
    color: #fff;
}

.sg-start-configurator .sg-project-label,
.sg-start-configurator h2 {
    color: #fff;
}

.sg-start-configurator h2 {
    margin: 4px 0 12px;
    font-size: 28px;
    font-weight: 300;
}

.sg-start-configurator p {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .9);
}

.sg-start-configurator .btn-u {
    color: var(--sg-primary) !important;
    background: #fff !important;
}

.sg-start-configurator .btn-u:hover,
.sg-start-configurator .btn-u:focus {
    background: var(--sg-tint) !important;
}

.sg-start-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: center;
}

.sg-start-person {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid #dfe3df;
    border-radius: 12px;
}

.sg-start-avatar {
    flex: none;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    background: var(--sg-primary);
    border-radius: 50%;
}

.sg-start-person strong {
    display: block;
    font-size: 17px;
}

.sg-start-role,
.sg-start-line {
    display: block;
    font-size: 14px;
    color: #666;
}

.sg-start-line a {
    color: var(--sg-primary);
}

.sg-start-contact-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.sg-start-contact-actions .sg-back {
    margin: 0;
}

@media (max-width: 991px) {
    .sg-start-systems-grid,
    .sg-start-why-grid,
    .sg-start-contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sg-start-sizes-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .sg-start-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 24px;
    }

    .sg-start-products,
    .sg-start-systems,
    .sg-start-why,
    .sg-start-sizes,
    .sg-start-contact {
        padding: 40px 0;
    }

    .sg-start-systems-grid,
    .sg-start-why-grid,
    .sg-start-contact-grid {
        grid-template-columns: 1fr;
    }

    .sg-start-configurator {
        padding: 24px 20px;
    }
}

/* ---- Mini-pitch family page (Views/MiniPitch/Minispielfeld.cshtml): the choice of construction ---- */
.sg-family-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 8px;
}

.sg-family-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: var(--sg-tint);
    border-radius: 12px;
}

.sg-family-tag {
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--sg-primary);
    border-radius: 999px;
}

.sg-family-card h3 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 600;
}

.sg-family-card h4 {
    margin: 14px 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-primary);
}

.sg-family-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: #444;
}

.sg-family-when {
    margin-top: 16px !important;
    font-weight: 600;
    color: #222 !important;
}

.sg-family-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: auto !important;
    padding-top: 20px;
}

.sg-family-links .sg-back {
    margin: 0;
    background: transparent;
}

.sg-family-note {
    margin-top: 24px;
    padding: 20px 24px;
    border-left: 4px solid var(--sg-primary);
    background: #fff;
    border: 1px solid #dfe3df;
    border-left-width: 4px;
    border-radius: 10px;
}

.sg-family-note p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: #444;
}

.sg-family-note a {
    font-weight: 600;
    color: var(--sg-primary);
}

/* On the Classic and Advanced pages: the same pitch in the other construction, named at the top. */
.sg-product-sibling {
    margin: 20px 0 0;
    padding: 14px 18px;
    font-size: 15px;
    line-height: 1.5;
    color: #444;
    background: var(--sg-tint);
    border-radius: 10px;
}

.sg-product-sibling a {
    font-weight: 600;
    color: var(--sg-primary);
}

@media (max-width: 767px) {
    .sg-family-grid {
        grid-template-columns: 1fr;
    }

    .sg-family-card {
        padding: 22px 20px;
    }
}