/*
* Copyright 2023, Mars+Blum
* www.marsundblum.at
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 30/03/2023
*/

/* ––––––––––––––––– Font ––––––––––––––––– */

/*  Sunscript basic - latin */

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Sunscript';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/SunscriptNEUE-ExtraLight.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/SunscriptNEUE-ExtraLight.ttf') format('truetype'), /* Safari, Android, iOS */
  }

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Sunscript';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/SunscriptNEUE-ExtraBold.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/SunscriptNEUE-ExtraBold.ttf') format('truetype'), /* Safari, Android, iOS */
  }

/* inter-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200, 800;
  src: url('../fonts/inter-v13-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/inter-v13-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
	}

/* ––––––––––––––––– Color palette  ––––––––––––––––– */
:root {    
    --brick: #FA475F;
    --lime: #FFEF85;
    --grass: #a2de33;
    --sky: #ACD0F0;
    --moss: #013c3c;
    --text: #252525;
    --hover: #D6554F;
    }

* {
	box-sizing: border-box;
	}

html {
    font-size: 62.5%;
	scroll-behavior: smooth !important;
	}

body {
    color: var(--text);
	font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 2.2em;
    font-weight: 200;
    gap: 1.4em;
    letter-spacing: -.05em;
    line-height: 1.2;
    padding: 0 8px;
    white-space: normal;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
	}


/* ––––––––––––––– Main Menu ––––––––––––––– */

nav button { display: none; }

.js .burger {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 80px;
    }

.js nav button {
    align-items: center;
    background-color: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0;
    margin-top: 1rem;
    padding: 0;
    width: 100%;
    }

.js nav button {
    translate:  none;
    }

.js nav ul {
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    height: 5vh;
    justify-content: space-evenly;
    line-height: .1;
    /*opacity: 0;
    position: fixed;*/
    transform-origin: 0% 0%;
    transform: translate(0, -155%); 
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    transition: .8s;
    width: 100%;
    z-index: 1;
    }

.js nav ul.is-active {
    background-color: #fff;
    height: 100vh;
    line-height: 1;
    opacity: 1;
    padding: 10.4rem 0;
    transform: none;
    transition: .5s .2s;
    }

nav ul {
    list-style: none;
    /* Safari hack */
    list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
    margin: 0;
    overflow: hidden;
    padding: 0;
    }

nav li {
    list-style: none;
    margin-bottom: 0.25em;
    position: relative;
    text-decoration: none;  
    }

.js nav ul a {
    color: transparent;
    font-family: 'Sunscript', 'Inter Tight', sans-serif;
    font-size: 6.2rem;
    font-weight: 200;
    line-height: 1; 
    transition: opacity 0.85s ease;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: -.11em;
    }

.js nav ul li a:hover,
nav ul.is-active li.current a {
    color: var(--brick);
    }

.js nav ul > li:nth-of-type(1) {
    display: none;
    }

.js nav ul.is-active a

.js nav ul a: {
    color: var(--brick);
    }

.js nav ul.is-active a {
    color: var(--moss);
    -webkit-transition-property:color, text;
    -webkit-transition-duration: .55s;
    -webkit-transition-delay: .55s;
    -webkit-transition-timing-function: linear, ease-in;

    -moz-transition-property:color, text;
    -moz-transition-duration: .55s;
    -moz-transition-delay: .55s;
    -moz-transition-timing-function: linear, ease-in;

    -o-transition-property:color, text;
    -o-transition-duration:.55s;
    -o-transition-delay: .55s;
    -o-transition-timing-function: linear, ease-in;
    }

[aria-expanded] {
    background: transparent;
    border: none;
    height: auto;
    outline: transparent;
    width: 2em;
    }

.js nav button[aria-expanded="true"] {
    position: fixed;
    width: calc(100% - 16px);
    z-index: 100;
    }
    
#toggle span {  
    background: var(--brick);
    border-radius: 3px;
    display: block;
    height: 4px;
    margin-bottom: 7.4px;
    position: relative;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
    width: 33px;
    z-index: 1;
    }

#toggle[aria-expanded="true"] span {
    opacity: 0;
    }

#toggle[aria-expanded="true"] span:first-child {
    background: #232323;
    transform: rotate(45deg) translate(8px, -12px);
    opacity: 1;
    width: 70%;
    }

#toggle[aria-expanded="true"] span:last-child {
    background: #232323;
    opacity: 1;
    transform: rotate(-45deg) translate(8px, 10px);
    width: 70%;
    }

#toggle span:first-child {
    transform-origin: 0% 0%;
    width: 80%;
    }

#toggle span:nth-child(2) {
    width: 65%;
    }

#toggle span:last-child {
    width: 50%;
    transform-origin: 0% 100%;
    }

#menu li.logo {
    display: none;
    list-style: none;
    margin-bottom: 0.25em;
    position: relative;
    text-decoration: none;
    }


/* ––––––––––––––––– Grids ––––––––––––––––– */


body,
.menu_social,
.grid_item,
main.default_page,
main section,
section figure,
footer .footer_social { 
    display: flex;
    }

body,
.grid_item,
main.default_page,
main section {
    flex-direction: column;
    }


.align_top { justify-content: flex-start; }

footer, 
.footer_social,
.menu_social,
.align_centered {
    justify-content: center;
    }

.grid_item,
.align_bottom,
main section {
    justify-content: flex-end;
    }

.align_top figure { align-items: flex-start; }

.align_centered figure { align-items: center; }

section figure,
.align_bottom figure { align-items: flex-end; }

.items_grid,
main.default_page { gap: 1.4rem; }

main.cal-list { gap: 0; }

hr,
section figure,
section figcaption,
section.no_pad.full-bg.full,
.cal-list section,
.koop_lable span { 
    position: relative;
    }

aside.cal-list-header,
img.lames_lable,
figure img { 
    position: absolute;
    }

aside.cal-list-header,
figure img {
    top: 0;
    left: 0;
    }

hr { height: .5px; }

img,
section figure { 
    height: 100%;
    }

hr, 
img,
.pill,
.pill.full,
h1.cal-list-heading,
section figcaption,
.cal-list section,
.boxed-bg figcaption,
aside.cal-list-header img,
.basic .ultra h1 { /* Letzte Zeile kommt mir auch komuch vor!!*/
    width: 100%;
    } 

section figure {
    min-height: 36rem;
    /*height: auto;*/ 
    }

.pill,
.grid_item, 
.footer_social a,
.js nav ul .menu_social a  {
    overflow: hidden;
    }

.no_pad.no-bg figcaption,
.grid_item p img { display: none; } /* Was ist das und brauchts das wirklich???*/

aside.cal-list-header { 
    z-index: -1;
    }


/* ––––––––––––––––– Type ––––––––––––––––– */

h1, h2, h3, h4, h5, h6,
em,
.pill,
.date_time,
.koop_lable,
h1.cal-list-heading,
.footer_c2a div,
.logo a,
.cal-list > span,
section.heavy figcaption,
section.ultra figcaption,
.basic .ultra h1,
.cal-list > span {
    font-family: 'Sunscript', 'Inter Tight', sans-serif;
    }

.pill,
.heavy h1,
.ultra h1,
.ultra figure h1,
.ultra figure h2,
.megaultraheavy h1,
.megaultraheavy figure h1,
.megaultraheavy figure h2,
.footer_c2a div,
.cal-list > span { 
    font-weight: 800;
    }

p, h1, h2, h3, h4, h5, h6 {
    white-space: normal;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    }

.footer_content {
    font-size: .8em;
    }

h3, h4, h5, h6 {
    font-size: 1em;
    }

h1, h2 {
    font-size: 1.2em;
    line-height: 1.1em;
    }

.ultra p {
    font-size: 1.8em;
    }

.ultra h2,
.koop_lable span {
    font-size: 2.2em;
    }

.ultra h1,
.footer_c2a div,
.ultra figure h2 {
    font-size: 2.6em;
    }

.megaultraheavy h1,
.megaultraheavy figure h2 {
    font-size: 3.2em;
    }

.pill {
    font-size: 2.6rem
    }

.logo a {
    font-size: 4.8rem
    }

.heavy,
.ultra,
.megaultraheavy,
.date_time { 
    -webkit-font-smoothing: antialiased;
    }

.pill,
.align_center,
.footer_content,
.footer_c2a div {
    text-align: center;
    }

.align_right {
    text-align: right;
    }


.ultra figcaption h1,
.ultra figcaption h2,
.ultra figcaption h1,
.ultra figcaption h2 {
    line-height: .96em;
    }




/* .ultra h1, .ultra h2, .ultra h3, .ultra h4, .ultra h5, .ultra h6 { letter-spacing: -.04em; } */

/* 
h1, h2, h3, h4, h5, h6, .logo a {
    font-weight: 200;
    line-height: 1;
    }
*/

/* h1 {line-height: 1.1; } */

/* h2,.ultra p { line-height: 1.2; } */

/* .heavy h1, .heavy h2, .ultra h1, .ultra h2, .footer_c2a div, .ultra { line-height: .96; } */

/* .ultra h1, .ultra h2, .ultra h3, .ultra h4, .ultra h5, .ultra h6 { letter-spacing: -.04em; }*/

/* h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .footer_content { letter-spacing: .1em; } */

/* em, section.heavy figcaption, section.ultra figcaption, .date_time { font-style: normal; } */

/* p, h1, h2, h3, h4, h5, h6, .basic .ultra h1, h1.cal-list-heading    { display: block; } */

/* .ultra h1 { white-space: normal; } */


/* ––––––––––––––––– Margins + Paddings + Overflows ––––––––––––––––– */

figure {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

h1, h2, h3, h4, h5, h6, p {
    margin-top: .25em;
    margin-bottom: .25em;
    }

.boxed-bg figure {
    padding-top: 32rem;
    }

figcaption { padding: 6.3rem 2.1rem .5rem; }

.boxed-bg figcaption { 
    padding: .5rem 1.05rem;
    margin: 1.05rem;
    }

.cal-list section { margin-bottom: 1.2em; }


.full-bg.brick, .full-bg.grass,
.full-bg.sky, .full-bg.lime { padding: 2.1rem; } 

.no_pad.full-bg.brick, .no_pad.full-bg.grass,
.no_pad.full-bg.sky, .no_pad.full-bg.lime { padding: 0; }

.cal-list section a.pill { margin-top: 2.4rem; }

.margin_bottom_small { margin-bottom: 4.6rem; }
.margin_bottom_mid { margin-bottom: 6.8rem; }
.margin_bottom_large { margin-bottom: 12rem; }


/*
p { margin-bottom: .1em; }

h1, h2, h3, h4, h5, h6 {
    margin-top: .25em;
    margin-bottom: .25em;
    }

footer div,
.footer_c2a div,
.footer_c2a a { 
    margin-bottom: .83rem;
    }

p, section figure,
p:first-child {
    margin-block-start: 0;
    }

p,
section figure,
p:last-child  { 
    margin-block-end: 0;
    }

section figure {  
    margin-inline-start: 0;
    margin-inline-end: 0;
    }

.cal-list section > div { margin-bottom: .5em; }

.cal-list section > div h1:first-child,
.cal-list section > div h2:first-child { 
    margin-top: 0;
    }



.cal-list section {
    margin-bottom: 1em;
    min-height: 10em;
    }

*/

/* figcaption { padding: 2.4rem; } Macht das überhaupt etwas??? */

/*
section figcaption { padding: 1.2rem; }

.full-bg { padding: 1.2rem; }

.boxed-bg figure { padding: 5%; }

.no_pad.full-bg,
aside.cal-list-header,
section.no_pad.full-bg.full {
    padding: 0;
    }

section.full figure { padding: 5rem 1.2rem 1.2rem; }

*/


/* ––––––––––––––––– Stylings ––––––––––––––––– */

img,
figcaption,
.full-bg {
    border-radius: 6px;
    }

.koop_lable span {   
    letter-spacing: -.5em;
    top: .28em;
    margin-right: .45em;
    }

.basic .ultra h1,
h1.cal-list-heading {
    font-size: 12vw;
    font-weight: 400;
    text-transform: uppercase;
    }

hr {
    display: block;
    unicode-bidi: isolate;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: auto;
    margin-inline-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
    }

figure > span.credits,
a > span.credits,
figcaption.credits {
    color: #ffffffd6;
    mix-blend-mode: difference;
    padding: 0.6rem;
    font-size: 2.2rem;
    position: absolute;
    bottom: 0;
    right: 0;
    }


/* ––––––––––––––––– Blockquote ––––––––––––––––– */

blockquote,
blockquote *:first-child::before,
blockquote *:last-child::after { 
    display: inline;
    }

blockquote *:first-child::before,
blockquote *:last-child::after {
    font-size: 2em;
    color: var(--brick);
    font-family: Arial, sans-serif; }

blockquote { font-style: italic; }

blockquote > *:first-child::before {
    content: "„";
    line-height: 1;
    }

blockquote > *:last-child::after {
    position: relative;
    content: "“";
    line-height: 0;
    top: .29em;
    }

.brick blockquote > *:first-child::before,
.brick blockquote > *:first-child::after {
    color: var(--lime);
    }

.no_pad.brick blockquote > *:first-child::before,
.no_pad.brick blockquote > *:first-child::after {
    color: var(--brick);
    }


/* ––––––––––––––––– Link ––––––––––––––––– */

a { text-decoration: underline dotted;   
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
	}

h1 a, h2 a, h3 a, h4 a,
.pill,
.logo a,
.grid_item a,
.footer_social a,
.js nav ul .menu_social a,
a:hover { 
    text-decoration: none;
    }

a:hover { cursor: url(../cursors/Solektiv-cursor-2.png) 52 60, pointer; }    

.pill,
.footer_social a,
.js nav ul .menu_social a,
label > .label-body {
    display: inline-block;
    }

.pill {	
    background-color: #fff;
    background-color: #ffffff54;
    backdrop-filter: blur(3px);
    border: 1.4px solid var(--text);
	border-radius: 2.5em;
    box-shadow: 0 3px 0px var(--text);
    cursor: pointer;
    letter-spacing: .1rem;
	line-height: 2.2rem;
	max-width: 100%;
    min-width: 18rem;
    padding: .4em;
	white-space: nowrap;
	} 

.pill.dark {
    border-color: var(--text);
    }

.pill:hover {
    box-shadow: 0 1px 0px var(--text);
	outline: 0;
	translate:  0 2px;
	}

.footer_social a,
.js nav ul .menu_social a {
    background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
    color: transparent;
    height: 32px;
	margin-right: 12px;
    width: 32px;
	}

.items_grid .pill {
    margin-top: 1rem;
    }


a.icon_1 { background-image: url(../icons/facebook-f.svg); }
a.icon_1:hover { background-image: url(../icons/facebook-f_.svg); }
a.icon_2 { background-image: url(../icons/instagram.svg); }
a.icon_2:hover { background-image: url(../icons/instagram_.svg); }
a.icon_3 { background-image: url(../icons/tiktok.svg); }
a.icon_3:hover { background-image: url(../icons/tiktok_.svg); } 
a.icon_4 { background-image: url(../icons/youtube.svg); }
a.icon_4:hover { background-image: url(../icons/youtube_.svg); }
a.icon_5 { background-image: url(../icons/vimeo-v.svg); }
a.icon_5:hover { background-image: url(../icons/vimeo-v_.svg); }
a.icon_6 { background-image: url(../icons/x-twitter.svg); }
a.icon_6:hover { background-image: url(../icons/x-twitter_.svg); }
a.icon_7 { background-image: url(../icons/mastodon.svg); }
a.icon_7:hover { background-image: url(../icons/mastodon_.svg); }
a.icon_8 { background-image: url(../icons/linkedin-in.svg); }
a.icon_8:hover { background-image: url(../icons/linkedin-in_.svg); }


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] { 
    background-color: transparent;
    border: 1.4px solid var(--text);
	border-radius: 2.5em;
    box-shadow: 0 3px 0px var(--text);
    color: var(--text);
    cursor: pointer;
    display: inline-block;
    /*font-size: .85rem;*/   
    font-weight: 200;
    line-height: 2.2rem;
	letter-spacing: .1rem;
    margin-left: 4px;
	margin-right: 3px;
	margin-bottom: 9px;
    max-width: 100%;
    padding: .1em 2.4em;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
    }

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
    color: #FB5959;
    box-shadow: 0 1px 0px var(--text);
    translate:  0 2px;
	outline: 0;
	}

.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus { 
    border-color: #888;
    color: var(--text);
    outline: 0;
    }

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
    background-color: #FFF;
    background-color: #ffffff54;
    border-color: #3f3f3f;
    color: #D6554F;
    }

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus { 
    background-color: var(--brick);
    color: var(--moss);
    }

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
    background-color: #fff;
    background-color: #ffffff54;
    border: 1.4px solid var(--text);
    border-radius: 2.5em;
    box-shadow: inset -2px 2px 0px #FB5959;
    color: var(--text);
    cursor: text;
    font-size: .85rem;
    font-weight: 200;
    letter-spacing: .1rem;
    line-height: 2.2rem;
    min-height: 38px;
    padding: .1em 2.4em;
	position: relative;
    text-decoration: none;
	top: 3px;
    }

/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    }

textarea {
    min-height: 65px;
    padding-top: 6px;
    padding-bottom: 6px;
    }

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    background-color: var(--sky);
    box-shadow: inset -2px 2px 0px var(--moss);
    outline: 0;
    }

label,
legend {
    display: block;
    font-weight: 200;
    margin-bottom: .5rem;
    }

fieldset {
    border-width: 0;
    padding: 0;
    }

input[type="checkbox"],
input[type="radio"] {
    display: inline;
    }

label > .label-body {
    font-weight: normal;
    margin-left: .5rem;
    }

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
    list-style: circle inside;
    }

ol {
    list-style: decimal inside;
    }

ol, ul {
    margin-top: 0;
    padding-left: 0;
    }

ul ul,
ul ol,
ol ol,
ol ul {}

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
    background: #F1F1F1;
    border: 1px solid #E1E1E1;
    border-radius: 4px;
    font-size: 90%;
    margin: 0 .2rem;
    padding: .2rem .5rem;
    white-space: nowrap;
    }

pre > code {
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre;
    }

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table { 
    border: none;
    margin-top: 2.8rem; }

th,
td {
    border-bottom: 1px solid var(--sky);
    padding: 12px 15px;
    text-align: left;

    font-size: 2.2rem;
    vertical-align: top;    
    border-bottom: none;
    border: none;
    }

th:first-child,
td:first-child {
    padding-left: 0;
    }

th:last-child,
td:last-child {
    padding-right: 0;
    }

tbody tr {
    display: flex;
    flex-direction: column;
    align-items: center;
    }

tbody tr td {
    width: 60% !important;
    padding: 10px 0;
    }

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
    margin-bottom: 1rem;
    }

input,
textarea,
select,
fieldset {
    margin-bottom: 1.5rem;
    }

/* ––––––––––––––––– Color –––––––––––––––– */

h1, h2, h3, h4, h5, h6, .logo a, .pill.dark,
section.brick.boxed-bg h1, section.brick.boxed-bg h1 a,
section.grass.boxed-bg h1, section.grass.boxed-bg h1 a,
section.lime.boxed-bg h1, section.lime.boxed-bg h1 a,
section.sky.boxed-bg h1, section.sky.boxed-bg h1 a  { color: var(--moss); }

section.brick.no-bg h1, section.brick.no-bg h1 a { color: var(--brick); }
section.grass.no-bg h1, section.grass.no-bg h1 a { color: var(--grass); }
section.lime.no-bg h1, section.lime.no-bg h1 a { color: var(--lime); }
section.sky.no-bg h1, section.sky.no-bg h1 a  { color: var(--sky); }

section.brick.full-bg figcaption h1, section.brick.full-bg figcaption h1 a,
.basic .ultra h1, h1.cal-list-heading, .koop_lable span, a:hover, .pill.dark,
section.brick .pill.dark:hover, section.grass.full-bg figcaption h1 a:hover,
section.lime.full-bg figcaption h1 a:hover, section.sky.full-bg figcaption h1 a:hover { color: var(--brick); }
section.grass.full-bg figcaption h1, section.grass.full-bg figcaption h1 a { color: var(--grass); }
section.lime.full-bg figcaption h1, section.lime.full-bg figcaption h1 a { color: var(--lime); }
section.sky.full-bg figcaption h1, section.sky.full-bg figcaption h1 a { color: var(--sky); }

section.brick.no-bg figcaption h1, section.brick.no-bg figcaption h1 a,
section.grass.no-bg figcaption h1, section.grass.no-bg figcaption h1 a,
section.lime.no-bg figcaption h1, section.lime.no-bg figcaption h1 a,
section.sky.no-bg figcaption h1, section.sky.no-bg figcaption h1 a,
section.brick.full-bg figcaption h1 a:hover { color: var(--sky); }

section.brick.full-bg, section.brick.boxed-bg figcaption, hr { background-color: var(--brick); }
section.grass.full-bg, section.grass.boxed-bg figcaption { background-color: var(--grass); }
section.lime.full-bg, section.lime.boxed-bg figcaption { background-color: var(--lime); }
section.sky.full-bg, section.sky.boxed-bg figcaption { background-color: var(--sky); }

a, section.brick.no-bg .pill:hover { color: var(--text); 
    }


/* ––––––––––––––––– Image –––––––––––––––– */

.logo {
    z-index: 100;
    }

.logo a {
    text-transform: uppercase;
}

img { 
    object-fit: cover;
    object-position: center center;
    }

.items_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,  minmax(350px, 1fr) );
	}

.items_grid > a {
    position: relative;
}

.wide,
.big {
    grid-column: auto;
    }
.tall,
.big { 
    grid-row: auto;
    }

aside.cal-list-header img {
    position: fixed;
    height: 80vh;
    object-fit: contain;
    object-position: top right;
    }

img.lames_lable {
    height: 6.2em;
    width: auto;
    right: 3em;
    bottom: 0px;
    }

/* ––––––––––––––––– Media (min 512px) –––––––––––––––– */

@media all and (min-width: 512px) {
    body {
        letter-spacing: normal;
        }

    }


/* ––––––––––––––––– Media (min 720px) –––––––––––––––– */

@media all and (min-width: 720px) {
    body {
        font-size: 2.6em;
        padding: 0 2vw;
        }
        

    /* ––––––––––––––––– Grids (min 720px) –––––––––––––––– */

    footer,
    footer .footer_c2a,
    .cal-list section {
        display: flex;
        }

    main,
    footer,
    footer .footer_c2a,
    .cal-list section {
        flex-direction: row;
        }

    main.default_page {
        flex-direction: initial;
        }

    main,
    footer {
        flex-wrap: wrap;
        }

    .cal-list section {
        flex-wrap: nowrap;
        }

    footer .footer_social {
        justify-content: left;
        }
    
    footer,
    footer .footer_c2a {
        align-items: center;
        }

    footer {
		justify-content: space-between;
	    }

    footer .footer_c2a {
        justify-content: space-evenly;
        }

    .items_grid {
        grid-template-columns: repeat(auto-fit,  minmax(300px, 1fr) );
        }

    .items_grid {
        grid-auto-rows: 28rem;
        }

    .items_grid {
        grid-auto-flow: dense;
        }

    .wide, .big  {
        grid-column: span 2;
        }

    .tall, .big {
        grid-row: span 2;
        }

    footer .footer_c2a {
        gap: 24px;
        }

    .cal-list section {
        gap: 1em;
        }

    .cal-list > span p {
        height: 2.2rem;   
        }

    .cal-list > span {
        height: 240rem;
        }

    section figure { 
        min-height: 50rem;
        }

    /*aside.items_grid img 
        { min-height: 32rem;
        }*/

    .cal-list > span p {
        width: 10em;       
        }

    .cal-list > span {
        width: 6rem;
        }

    section.full,
    footer .footer_c2a {
        width: 100%;
        }

    .boxed-bg figcaption {
        width: auto;
        max-width: 76%;
        padding: 1rem 2.1rem;
        margin: 2.1rem;
        }

    section.half {
        width: calc( 50% - 7px );
        }

    section.one.third {
        width: calc( (100% / 3) -  .94rem );
        }

    section.two.thirds {
        width: calc( (100% / 3) * 2 - .47rem );
        }

    .cal-list section > div { width: calc(50% - 3.6rem); }
    
    .cal-list section > div:last-child { width: calc(50% + 3.6rem); }

    .cal-list > span {
        position: absolute;
        }


    /* ––––––––––––––––– Padding + Margin + Overflows (min 720px) –––––––––––––––– */

    h1 {
        margin-top: .2em;
        }

    .megaultraheavy h1,
    .megaultraheavy figure h2 {
    font-size: 4.2em;
    }

    .pill {
        padding: .5em 5%;
        margin-bottom: .4rem;
        margin-right: .4rem;
        width: auto;
        }

    .pill:last-child {
        margin-right: 0;
        }

    .pill.large { 
        padding: .5em 16%;
        }

    .pill.full { 
        width: 100%;
        }

    /*
    .pill.full {
        width: 100%;
        }
    */
        /*
    .boxed-bg figcaption {
        margin: 36% 20% 4% 6%;
        padding: .5rem 2.1rem;
        }
        *()

    section.two.thirds.margin_one_third,
    section.one.third.margin_one_third,
    section.half.margin_one_third { margin-left: calc((100% / 3) + .47rem); }
  
    section.half.margin_half,
    section.one.third.margin_half { margin-left: calc(50% + .7rem); }
  
    section.one.third.margin_two_third { margin-left: calc((100% / 3) * 2 + .94rem); }

    /*section.full figure {
        padding: 22.5% 25% 5% 2.5%;
        }*/

    .cal-list section {
        padding-left: 4.6rem;
        }

    tbody tr {
        display: table;
        align-items: initial;
        }

    tbody tr td {
        width: initial !important;
        padding: 10px;
        hyphens: none;
        }


    /* ––––––––––––––––– Stylings (min 720px) –––––––––––––––– */

    .cal-list > span {
        display: block;
        }

    .cal-list > span p {
        transform: rotate(90deg);       
        }

    .cal-list > span p {
        transform-origin: bottom left;    
        }

    .cal-list > span p {
        translate: 1rem -1.4rem       
        }

    
     /* ––––––––––––––––––– Type (min 720px) ––––––––––––––––––– */

    .pill,
    .cal-list > span {
        font-size: 2.89rem;
        }



   /*



    .ultra {
        line-height: .95em;
        }

    h1 {
        line-height: .95em;
        }

    h2 {
        line-height: .95em;
        }

    h3 {
        line-height: 1.1em;
        }
    */

    /* ––––––––––––––– Main Menu (min 720px) –––––––––––––– */
    
    .js nav button[aria-expanded="true"] {
        width: calc(100% - 4vw);
        }

    }


/* ––––––––––––––––– Media (min 1024px) –––––––––––––––– */

@media all and (min-width: 1024px) {
    
    body {
        font-size: 3.4em;
        padding: 0 4vw;
        gap: .5em;
        }


    /* ––––––––––––––––– grid (min 1024px) –––––––––––––––– */

    .items_grid {
        grid-template-columns: repeat( auto-fit,  minmax(265px, 1fr) );
        }


    /* ––––––––––––––––– Margin + Padding + Overflows (min 1024px) –––––––––––––––– */

    .pill {
        padding: .55em 5%;
        margin-bottom: .4rem;
        }

    .pill.large { 
        padding: .55em 25%;
        }



 

    /*
    section.grid_item {
        padding-bottom: .8rem;
        }
    
    section.event_img {
        padding-bottom: 0;
        }
    */
        /*
    section.full figure  {
        padding: 25% 27.5% 7.5% 5%;
        }
        */


    /* ––––––––––––––––––– Main Menu (min 1024px) ––––––––––––––––––– */

    .js nav button {
		display: none;
  	    }

	.js nav ul, .js nav ul.is-active {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		opacity: 1;
		height: auto;
	    padding: 1em 0 0;
	    transform: none;
        justify-content: flex-start;
        /*width: calc(100% - 8vw);*/
        background-color: transparent;
		}

	.js nav li { 
		margin-right: .6em;
		}

    .js nav ul > li:nth-of-type(1) {
        display: inline-block;
        }
    
    .js nav ul > li:nth-of-type(2) {
        display: none;
        }
    
	.js nav ul a {
        color: var(--moss);
        font-size: 1.2em;
        letter-spacing: normal;
        -webkit-transition-property: color, text;
        -webkit-transition-duration: .55s;
        -webkit-transition-delay: .55s;
        -webkit-transition-timing-function: linear, ease-in;
        letter-spacing: -.06em;
        line-height: .8;
		}

	.js nav ul a::before {
	   content: "";
	   display: block;
	   position: absolute;
	   top: .84em;
	   height: 0;
	   width: 0;
	   border-bottom: 2.5px dotted transparent;
	   transition: width 600ms;
	   }

	.js nav ul a:hover::before {
	   width: 100%;
	   border-color: var(--moss);
	   border-bottom: 2.5px dotted var(--moss);
	   transition: width 600ms;
	   }

    nav ul li.current a {
        color: var(--brick);
        }
        
    #menu li.logo {
        display: block;
        margin-right: .6em;
        }
    
    .menu_social {
        display: none;
        }

    .cal-list section div:first-child {
        display: flex;
        flex-direction: column;
        height: auto;
        }

    .cal-list section div:first-child figure {
        min-height: 10rem;
        margin: .5em 0;
        flex-grow: 1;

        }


    }

    /* ––––––––––––––––– Media (min 1440px) –––––––––––––––– */

        @media all and (min-width: 1440px) {
            
            body {
                font-size: 5.2em;
                padding: 0 4vw;
                gap: .25em;
                }

            .js nav ul a { 
                font-size: 1em;
                }

            section figure { 
               min-height: 65rem; }

            .pill,
            .cal-list > span {
                font-size: 4.6rem;
                line-height: 2.8rem;
                }

            .pill {
                padding: .3em 5%;   
                }

            .pill.large { 
                padding: .3em 20%;
                }

            .boxed-bg figcaption {
                max-width: 64%;
                padding: 2rem 4.2rem;
                margin: 4.2rem;
                }

            .cal-list > span p {
                translate: 1rem 0;       
                }

            .cal-list section {
                padding-left: 5.8rem;
                }
            }

    /* ––––––––––––––––– Media (min 2160px) –––––––––––––––– */

        @media all and (min-width: 2160px) {
            section figure { 
               min-height: 79rem; }
        }