/* ============================================================================
   Concept 1C, "Dark greenhouse".

   Zelfde aanpak als concept-1a.css: alles hangt onder .c1c of onder een class
   die de js op de pagina zet, zodat niets naar de rest van de shop lekt.
   Layout via Bootstrap 4, deze css doet kleur, typografie en beeldverhouding.

   Het palet komt uit het oorspronkelijke ontwerp: bijna zwart met een paarse
   zweem, creme tekst, roze en koraal als accent, en donkergroen voor de
   kassierdere vlakken.

   Opbouw volgens ITCSS, alle media queries in sectie 15.
   ========================================================================= */

/* 1. TOKENS ---------------------------------------------------------------- */

.c1c,
body.c1c-page {
    --c1c-bg: #141016;
    --c1c-paneel: #2c1b2a;
    --c1c-kaart: #221a22;
    --c1c-groen: #232720;
    --c1c-ink: #ecebe3;
    --c1c-roze: #f2a7b8;
    --c1c-blush: #f3b6c4;
    --c1c-coral: #e8917a;
    --c1c-rose: #e9d9de;
    --c1c-mauve: #d9c9d0;
    --c1c-gedempt: #b59aa8;
    --c1c-open: #7fc47f;
    --c1c-dicht: #b3563f;

    --c1c-display: 'Big Shoulders Display', 'Archivo', system-ui, sans-serif;
    --c1c-text: 'Archivo', system-ui, -apple-system, sans-serif;
    --c1c-accent: 'Cormorant Garamond', Georgia, serif;
}

/* 2. DE PAGINA ZELF -------------------------------------------------------- */

body.c1c-page .fixed-top,
body.c1c-page .footer,
body.c1c-page .footer-bottom,
body.c1c-page .breadcrumb-container {
    display: none !important;
}

html body.c1c-page {
    margin-top: 0;
    background: var(--c1c-bg);
}

html {
    scroll-behavior: smooth;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip;
}

.lenis [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

body.c1c-page #content .container:has(.c1c),
body.c1c-page #content .row.cms_content:has(.c1c),
body.c1c-page #content [class*="col-"]:has(.c1c),
body.c1c-page .c1c-unwrap {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* 3. GENERIEK -------------------------------------------------------------- */

.c1c {
    color: var(--c1c-ink);
    font-family: var(--c1c-text);
    font-size: 15px;
    line-height: 1.55;
    background: var(--c1c-bg);
}

.c1c a,
#content .c1c a {
    color: inherit;
    text-decoration: none;
}

.c1c h1,
.c1c h2,
.c1c h3 {
    margin: 0;
    color: inherit;
}

.c1c p {
    margin: 0;
}

.c1c img {
    max-width: 100%;
}

/* 4. TYPOGRAFIE ------------------------------------------------------------ */

.c1c-eyebrow {
    font: italic 500 20px/1.3 var(--c1c-accent);
}

.c1c-eyebrow--roze { color: var(--c1c-roze); }
.c1c-eyebrow--coral { color: var(--c1c-coral); }
.c1c-eyebrow--blush { color: var(--c1c-blush); }

.c1c-sectionhead__title {
    font: 700 34px/1 var(--c1c-display);
    text-transform: uppercase;
}

.c1c-sectionhead__link {
    font: 500 13px/1 var(--c1c-text);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c1c-roze);
    border-bottom: 1px solid;
    white-space: nowrap;
}

/* 5. KNOPPEN --------------------------------------------------------------- */

.c1c .btn {
    padding: 14px 22px;
    font: 600 13px/1 var(--c1c-text);
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 0;
}

/* Twee soorten, meer niet. Gevuld in het roze is de hoofdactie, de omlijnde
   in creme staat ernaast. Bootstrap heeft meer varianten en die hebben hun
   eigen kleuren voor hover, focus en ingedrukt: zonder deze regels springt
   een omlijnde knop bij het aanwijzen naar het geel of het wit van
   Bootstrap. Vandaar dat elke toestand hier expliciet staat. */
#content .c1c .btn-light {
    background: var(--c1c-roze);
    border-color: var(--c1c-roze);
    color: var(--c1c-bg);
}

#content .c1c .btn-light:hover,
#content .c1c .btn-light:focus,
#content .c1c .btn-light:not(:disabled):not(.disabled):active {
    background: var(--c1c-blush);
    border-color: var(--c1c-blush);
    color: var(--c1c-bg);
}

#content .c1c .btn-outline-light {
    background: transparent;
    border-color: var(--c1c-rose);
    color: var(--c1c-rose);
}

/* De omlijnde knop keert om bij het aanwijzen, de gewone route voor een
   outline-knop, maar dan in creme in plaats van het wit van Bootstrap. */
#content .c1c .btn-outline-light:hover,
#content .c1c .btn-outline-light:focus,
#content .c1c .btn-outline-light:not(:disabled):not(.disabled):active {
    background: var(--c1c-ink);
    border-color: var(--c1c-ink);
    color: var(--c1c-bg);
}

/* Bootstrap zet bij focus een gele of witte gloed om de knop. */
.c1c .btn:focus,
.c1c .btn.focus,
.c1c .btn:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 2px rgba(242, 167, 184, .35);
}

.c1c .btn {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* 6. HEADER ---------------------------------------------------------------- */

.c1c-header {
    background: var(--c1c-bg);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.c1c-header__bar {
    min-height: 72px;
}

.c1c-logo {
    height: 38px;
    width: auto;
}

.c1c-plaats {
    font: italic 500 18px/1 var(--c1c-accent);
    color: var(--c1c-roze);
    margin-left: 14px;
}

.c1c-nav {
    font: 500 13px/1 var(--c1c-text);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c1c-rose);
}

.c1c-nav a + a {
    margin-left: 26px;
}

.c1c-nav a:hover,
.c1c-nav .is-actief {
    color: var(--c1c-roze);
}

.c1c-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: 0;
}

.c1c-burger span {
    display: block;
    height: 2px;
    background: var(--c1c-ink);
}

.c1c-drawer a {
    display: block;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font: 500 14px/1 var(--c1c-text);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* 6b. HET RASTER -----------------------------------------------------------
   In het ontwerp staan de blokken niet tegen elkaar aan: er loopt overal een
   smalle naad tussen waar de paginakleur doorheen komt, en rondom ook. Dat is
   hier een halve tussenruimte op elke kolom, zodat het tussen twee blokken op
   acht pixels uitkomt en aan de buitenrand op dezelfde maat.
   ------------------------------------------------------------------------- */

/* style.css zet .col-12 op padding 0, bedoeld voor het winkelwagenscherm.
   Dat raakt hier elke kolom die voor mobiel col-12 meekrijgt: de gutter
   ernaast valt weg en het blok staat 15px verder naar links dan de koppen
   van de secties eromheen. Hier zetten we de maat van Bootstrap terug.
   De volle blokken hebben geen container, dus die houden hun eigen naad. */
.c1c .container > .row > .col-12 {
    padding-left: 15px;
    padding-right: 15px;
}

/* Een rij met dezelfde smalle naad als tussen de volle blokken, 8px, in
   plaats van de gutter van 30px. De marge van 11px vangt het verschil op
   tussen de 15px van Bootstrap en de 4px hier, zodat de buitenrand van de
   tegels precies onder de kop van de sectie blijft liggen. */
.c1c .row.c1c-naad {
    margin-left: 11px;
    margin-right: 11px;
}

.c1c .row.c1c-naad > [class*="col-"] {
    padding: 4px;
}

.c1c-vlak {
    padding: 0 8px;
}

.c1c-vlak:first-of-type {
    padding-top: 4px;
}

.c1c-vlak .row {
    margin-left: -4px;
    margin-right: -4px;
}

.c1c-vlak .row > [class*="col-"] {
    padding: 4px;
}

/* de twee gestapelde tegels naast de tekst, met dezelfde naad ertussen */
.c1c-stapel {
    margin-left: 0;
    margin-right: 0;
}

.c1c-stapel > [class*="col-"] {
    padding: 0;
}

.c1c-stapel > [class*="col-"]:first-child {
    padding-bottom: 8px;
}

/* 7. HERO ------------------------------------------------------------------
   Drieluik: beeld, paneel, beeld. Het paneel is twee van de vier kolommen.
   ------------------------------------------------------------------------- */

.c1c-hero__beeld {
    position: relative;
    height: 620px;
    overflow: hidden;
    background: var(--c1c-groen);
}

.c1c-hero__beeld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c1c-hero__label {
    position: absolute;
    left: 16px;
    bottom: 16px;
    font: 500 12px/1 var(--c1c-text);
    letter-spacing: .04em;
    color: var(--c1c-ink);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.c1c .c1c-hero__paneel {
    height: 620px;
    padding: 64px;
    background: var(--c1c-paneel);
}

.c1c-hero__titel {
    font: 900 104px/.88 var(--c1c-display);
    text-transform: uppercase;
    letter-spacing: .01em;
}

.c1c-hero__tekst {
    font: 400 15px/1.55 var(--c1c-text);
    color: var(--c1c-mauve);
    max-width: 44ch;
}

.c1c-status {
    font: 500 13px/1 var(--c1c-text);
    color: var(--c1c-mauve);
}

.c1c-status__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--c1c-gedempt);
}

.c1c-status.is-open .c1c-status__dot { background: var(--c1c-open); }
.c1c-status.is-closed .c1c-status__dot { background: var(--c1c-dicht); }

/* 8. VERDIEPINGEN ---------------------------------------------------------- */

.c1c-floor {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 620px;
    padding: 40px;
    overflow: hidden;
    background: var(--c1c-groen);
}

.c1c-floor__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.c1c-floor__scrim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(10, 12, 10, .85));
}

.c1c-floor__body {
    position: relative;
}

.c1c-floor__titel {
    font: 900 92px/.9 var(--c1c-display);
    text-transform: uppercase;
}

.c1c-floor__tekst {
    font: 400 14px/1.5 var(--c1c-text);
    color: var(--c1c-rose);
    max-width: 340px;
}

/* 9. TWEE WERELDEN --------------------------------------------------------- */

.c1c-werelden {
    background: var(--c1c-bg);
}

.c1c-eyebrow--kapitaal {
    font: 600 12px/1.4 var(--c1c-text);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.c1c-werelden__titel {
    font: 900 64px/.92 var(--c1c-display);
    text-transform: uppercase;
}

.c1c-werelden__tekst {
    font: 400 15px/1.7 var(--c1c-text);
    color: var(--c1c-mauve);
    max-width: 44ch;
}

/* Vaste hoogte, anders bepaalt de foto zelf hoe hoog de tegel wordt en loopt
   de sectie op tot het dubbele van de bedoeling. Eén maat voor alle tegels,
   zodat twee tegels naast of onder elkaar altijd even hoog zijn. */
.c1c-tegel {
    position: relative;
    display: block;
    height: 240px;
    overflow: hidden;
    background: var(--c1c-groen);
}

.c1c-tegel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c1c-tegel__scrim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .7));
}

.c1c-tegel__label--coral { color: var(--c1c-coral); }
.c1c-tegel__label--roze { color: var(--c1c-roze); }

.c1c-tegel__label {
    position: absolute;
    right: 24px;
    bottom: 18px;
    font: 600 14px/1 var(--c1c-text);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* 10. PRODUCTEN ------------------------------------------------------------
    De kaarten komen uit article_list_small.ctp, dus de markup ligt vast.
    Hier de donkere variant eroverheen.
    ------------------------------------------------------------------------ */

/* Het thema zet deze lijst op vier kolommen. Zes maakt de kaarten kleiner,
   wat beter past bij een strook "deze week binnen" dan bij een overzicht.
   Op tablet drie, zodat zes artikelen twee volle rijen blijven; de mobiele
   regel van het thema staat op twee met !important en die laten we staan. */
.c1c .article-list.mini {
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

@media (max-width: 1199px) {
    .c1c .article-list.mini {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* De kaart moet een flexdoos zijn, anders rekt de inhoud niet mee met de
   hoogte van het rastervak en blijven de prijzen op verschillende hoogtes
   hangen. style.css zet met .row .article_item:nth-child(-n+4) display op
   block, en dat weegt zwaarder dan .c1c .article_item. Vandaar #content
   ervoor, dat staat om het hele inhoudsgebied heen. Die regel van het thema
   raakt bovendien alleen de eerste vier kaarten, dus zonder dit zouden kaart
   vijf en zes zich anders gedragen dan de rest. */
#content .c1c .article_item {
    display: flex;
    cursor: pointer;
    background: var(--c1c-kaart);
}

.c1c .article_image_list_container {
    flex: 0 0 auto;
    overflow: hidden;
    margin: 10px 10px 0;
}

.c1c .article_image_list {
    height: auto;
    padding-bottom: 133%;
    background-size: cover;
    background-position: center;
    border: 0;
    margin-bottom: 0;
    transition: transform .4s ease;
}

.c1c .article_item:hover .article_image_list {
    transform: scale(1.03);
}

.c1c .article_image_list[style*="url(/image/)"] {
    background-image: repeating-linear-gradient(135deg, var(--c1c-groen) 0 8px, var(--c1c-kaart) 8px 16px) !important;
    background-size: auto !important;
}

/* De kaart over de volle hoogte van zijn rastervak, zodat de prijzen van
   alle kaarten op één lijn onderaan staan ook als de ene naam over twee
   regels loopt en de andere niet. */
.c1c .article_item_link {
    display: flex;
    width: 100%;
}

.c1c .article_content_list {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 0 16px;
}

/* De markup komt uit article_list_small.ctp, dus die ligt vast. Met
   display:contents worden merk, naam en prijs zusjes van elkaar en kunnen
   ze onder elkaar in één kolom. */
.c1c .article_remaining {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-top: 14px;
    padding: 0 16px;
}

.c1c .article_header {
    display: contents;
}

/* Geen flex-basis hier: de kolomrichting maakt van 100% een hoogte in
   plaats van een breedte, en dan duwt het merk de naam en de prijs onder de
   kaart uit. In een kolom is elk kind vanzelf al zo breed als de kaart. */
.c1c .article_header .brand_name {
    order: 1;
    flex: 0 0 auto;
    font: 500 11px/1.2 var(--c1c-text);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c1c-roze);
    margin-bottom: 4px;
}

.c1c .article_header p {
    order: 2;
    font: 500 14px/1.3 var(--c1c-text);
    color: var(--c1c-ink);
    margin: 0;
}

.c1c .article_header p b {
    font-weight: 500;
}

.c1c .usp-article {
    display: none;
}

.c1c .article-price {
    order: 3;
    margin-top: auto;
    padding-top: 8px;
}

/* De prijs krijgt uit article_list_small.ctp de class tmplt_attention_color
   mee. Dat is de aandachtskleur uit het SW-Retail beheer, en die komt in de
   gegenereerde stylesheet binnen als `color: #000 !important`. Op een bijna
   zwarte kaart is dat onleesbaar, en met specificiteit kom ik er niet
   overheen, dus is !important hier de enige route. Het staat onder .c1c, dus
   het raakt alleen deze conceptpagina's. De oude prijs heeft daarnaast een
   eigen id-regel in stylesheet.css, vandaar de tweede selector. */
#content .c1c .article-price h3 {
    font: 400 13px/1.3 var(--c1c-text);
    margin: 0;
    white-space: nowrap;
    color: var(--c1c-ink) !important;
}

#content .c1c .article-price #article_original_price {
    font: 400 12px/1.3 var(--c1c-text);
    color: var(--c1c-gedempt) !important;
    margin-right: 6px;
}

/* Bij korting staan oude en nieuwe prijs onder elkaar; naast elkaar leest
   beter en past in de smallere kaart. Dat gaat hier via de kinderen en niet
   via display op .article-price zelf: het thema toont één van de twee
   prijsblokken en verbergt het andere met de class hide, en een eigen
   display-regel op dat blok zet dat verbergen uit. */
#content .c1c .article-price > * {
    display: inline;
}

.c1c .badges-article {
    top: 12px;
    left: 12px;
    gap: 6px;
}

.c1c .article-item-overlayer {
    background: var(--c1c-roze);
    color: var(--c1c-bg);
    font: 600 10px/1 var(--c1c-text);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 9px;
    border-radius: 0;
}

.c1c .sale_badge {
    background: var(--c1c-coral);
    color: var(--c1c-bg);
}

.c1c .sustainable-icon {
    background: var(--c1c-ink);
    height: 22px;
    padding: 3px 5px;
}

/* 11. DE WINKEL ------------------------------------------------------------ */

.c1c-winkel__beeld {
    height: 620px;
    overflow: hidden;
    background: var(--c1c-groen);
}

.c1c-winkel__beeld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c1c .c1c-winkel__paneel {
    padding: 64px;
    background: var(--c1c-paneel);
}

.c1c-winkel__titel {
    font: 900 56px/.95 var(--c1c-display);
    text-transform: uppercase;
}

.c1c-winkel__tekst {
    font: 400 15px/1.6 var(--c1c-text);
    color: var(--c1c-mauve);
    max-width: 44ch;
}

.c1c-hours {
    margin: 0;
    font: 400 14px/1.5 var(--c1c-text);
    color: var(--c1c-mauve);
}

.c1c-hours dt {
    font-weight: 600;
    color: var(--c1c-ink);
}

.c1c-hours dd {
    margin: 0;
}

.c1c-ps {
    padding: 24px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(242, 167, 184, .25);
}

.c1c-ps__titel {
    font: 700 24px/1 var(--c1c-display);
    text-transform: uppercase;
}

.c1c-ps__tekst {
    font: 400 14px/1.5 var(--c1c-text);
    color: var(--c1c-mauve);
}

/* 12. TEAM, MERKEN EN KAARTEN ---------------------------------------------- */

.c1c-portret {
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--c1c-groen);
}

.c1c-portret img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.c1c-portret:hover img {
    transform: scale(1.03);
}

.c1c-member__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--c1c-groen);
    flex: none;
    overflow: hidden;
}

.c1c-member__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c1c-member__name {
    display: block;
    font: 600 16px/1.3 var(--c1c-text);
}

.c1c-member__role {
    display: block;
    font: 400 12px/1.4 var(--c1c-text);
    color: var(--c1c-gedempt);
}

.c1c-merkenwand {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.c1c-merk {
    display: block;
    text-align: center;
}

.c1c-merk__tegel {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 104px;
    padding: 16px;
    background: #fff;
}

.c1c-merk__tegel img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    mix-blend-mode: multiply;
    transition: transform .3s ease;
}

.c1c-merk:hover .c1c-merk__tegel img {
    transform: scale(1.05);
}

.c1c-merk__naam {
    display: block;
    margin-top: 8px;
    font: 500 11px/1.4 var(--c1c-text);
    letter-spacing: .04em;
    color: var(--c1c-gedempt);
}

.c1c-kaart {
    background: var(--c1c-kaart);
    padding: 28px;
}

.c1c-kaart__tekst {
    font: 400 16px/1.7 var(--c1c-text);
    color: var(--c1c-ink);
    margin-bottom: 12px;
}

.c1c-kaart__tekst a {
    border-bottom: 1px solid rgba(255, 255, 255, .25);
}

.c1c-kaart__tekst--klein {
    font-size: 14px;
    color: var(--c1c-gedempt);
}

/* 13. FORMULIER ------------------------------------------------------------ */

.c1c-formulier {
    font: 500 12px/1.4 var(--c1c-text);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c1c-gedempt);
}

.c1c-formulier .row {
    margin-left: -8px;
    margin-right: -8px;
}

.c1c-formulier .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

.c1c-formulier input.form-control,
.c1c-formulier select.form-control,
.c1c-formulier textarea.form-control {
    display: block;
    width: 100%;
    font: 400 15px/1.5 var(--c1c-text);
    letter-spacing: 0;
    text-transform: none;
    color: var(--c1c-ink);
    background-color: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0;
    box-shadow: none;
    padding: 12px 14px;
    margin-top: 6px;
}

.c1c-formulier input.form-control:focus,
.c1c-formulier textarea.form-control:focus {
    border-color: var(--c1c-roze);
    box-shadow: none;
    outline: none;
}

.c1c-formulier textarea.form-control {
    height: 170px;
}

.c1c-formulier .sw-form-submit {
    margin-top: 16px;
    padding: 14px 26px;
    font: 600 13px/1 var(--c1c-text);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c1c-bg);
    background: var(--c1c-roze);
    border: 0;
}

.c1c-formulier .sw-form-submit:hover {
    opacity: .85;
}

/* 14. FOOTER --------------------------------------------------------------- */

.c1c-footer {
    background: var(--c1c-paneel);
    color: var(--c1c-rose);
    font: 400 14px/1.7 var(--c1c-text);
}

.c1c-footer a:hover {
    color: var(--c1c-roze);
}

.c1c-footer h3 {
    font: 700 22px/1 var(--c1c-display);
    text-transform: uppercase;
    color: var(--c1c-ink);
    margin-bottom: 14px;
}

.c1c-footer__col a {
    display: block;
}

.c1c-footer__logo {
    height: 50px;
    width: auto;
    margin-bottom: 20px;
}

.c1c-hours--footer {
    color: var(--c1c-rose);
}

.c1c-hours--footer dt {
    color: var(--c1c-ink);
}

.c1c-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    font: 400 12px/1.5 var(--c1c-text);
    color: var(--c1c-gedempt);
}

.c1c-footer__pay img {
    height: 20px;
    width: auto;
    margin-left: 10px;
}

/* 15. MEDIA QUERIES -------------------------------------------------------- */

/* Dezelfde maat als in 1A: de container loopt tot 1620px en houdt verder de
   eigen padding en breekpunten van Bootstrap. Alleen de volle blokken, de
   hero, de verdiepingen en de winkel, lopen van rand tot rand met de naad
   ertussen. Eerder stond hier 2000px met een eigen padding, waardoor de
   header en de footer bijna tot de schermrand liepen en de pagina geen
   midden meer had. */
@media (min-width: 1200px) {
    .c1c .container {
        max-width: 1620px;
    }
}

/* De plantenschetsen, hier in een lichte variant: op deze bijna zwarte
   pagina valt de donkerbruine versie volledig weg. Dezelfde regels als bij
   1A: niet achter foto's, producten of de merkenwand, groot en over de rand
   heen, en hooguit twee per pagina. De hero staat alleen op de homepage, de
   werelden op de homepage en op over ons, en bereiken alleen op contact. */
@media (min-width: 992px) {
    .c1c .c1c-hero__paneel,
    .c1c-werelden,
    .c1c-bereiken {
        background-repeat: no-repeat;
    }

    /* Twee lagen: de schets, en daarover een vlak in de paneelkleur dat hem
       half wegdrukt. Zo blijft het een suggestie en kan de tint in een regel
       bij zonder een nieuw svg-bestand. De schets staat zo ver naar beneden
       dat de titel en de tekst erboven blijven: het beeld is 900 px hoog en
       begint op 320 px vanaf de bovenkant van het paneel van 620 px. */
    .c1c .c1c-hero__paneel {
        background-image:
            linear-gradient(rgba(44, 27, 42, .62), rgba(44, 27, 42, .62)),
            url("../img/concept-1a/schets/schets-d-licht-135.svg");
        background-position: center, right -400px bottom -600px;
        background-size: cover, 900px auto;
    }

    .c1c-werelden {
        background-image: url("../img/concept-1a/schets/schets-a-licht.svg");
        background-position: left -300px center;
        background-size: 820px auto;
    }

    .c1c-bereiken {
        background-image: url("../img/concept-1a/schets/schets-a-licht.svg");
        background-position: right -320px bottom -180px;
        background-size: 760px auto;
    }
}

@media (min-width: 992px) {
    .c1c .c1c-team__col {
        flex: 0 0 20%;
        max-width: 20%;
    }

    /* De tekst houdt extra afstand van de tegels ernaast, boven op de gutter
       van 30px. Onder lg staat hij erboven en vervalt die afstand weer. */
    .c1c .c1c-werelden__tekstkolom {
        padding-right: 39px;
    }
}

@media (max-width: 1199px) {
    .c1c-hero__beeld,
    .c1c .c1c-hero__paneel,
    .c1c-winkel__beeld {
        height: 540px;
    }

    .c1c-hero__titel {
        font-size: 80px;
    }

    .c1c-tegel {
        height: 200px;
    }

    .c1c-hero__titel {
        font-size: 52px;
    }

    .c1c-floor__titel {
        font-size: 72px;
    }

    .c1c-werelden__titel,
    .c1c-winkel__titel {
        font-size: 44px;
    }

    .c1c .c1c-hero__paneel,
    .c1c .c1c-winkel__paneel {
        padding: 40px;
    }

    .c1c-merkenwand {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 991px) {
    .c1c-hero__beeld,
    .c1c .c1c-hero__paneel,
    .c1c-winkel__beeld {
        height: auto;
    }

    .c1c-hero__beeld img,
    .c1c-winkel__beeld img {
        aspect-ratio: 4 / 3;
    }

    .c1c-floor {
        min-height: 420px;
    }

    .c1c-tegel {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767px) {
    /* Gestapeld heeft de naad geen zin meer: de kolommen lopen dan over de
       volle breedte en lijnen gewoon uit op de kop erboven. */
    .c1c .row.c1c-naad {
        margin-left: 0;
        margin-right: 0;
    }

    .c1c .row.c1c-naad > [class*="col-"] {
        padding: 4px 15px;
    }

    .c1c .c1c-hero__paneel {
        padding: 28px 20px 32px;
    }

    .c1c-hero__titel {
        font-size: 42px;
    }

    .c1c-floor {
        padding: 24px 20px;
    }

    .c1c-floor__titel {
        font-size: 68px;
    }

    .c1c-sectionhead__title {
        font-size: 28px;
    }

    .c1c-werelden__titel,
    .c1c-winkel__titel {
        font-size: 34px;
    }

    .c1c .c1c-winkel__paneel {
        padding: 32px 20px 40px;
    }

    .c1c .btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 16px;
    }

    .c1c-merkenwand {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .c1c-merk__tegel {
        height: 84px;
        padding: 12px;
    }

    .c1c-member__avatar {
        width: 76px;
        height: 76px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .c1c .article_image_list,
    .c1c-portret img,
    .c1c .btn {
        transition: none !important;
    }
}