:root {
    --cutoff-border-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Csvg x='100%25' y='100%25' overflow='visible'%3E%3Cpath d='M-1 -9999 V-19 L-19 -1 H-9999' fill='none' stroke='%23DF242B' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E%3Cpath d='M1 9999 V1 H9999' fill='none' stroke='%23DF242B' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") bottom right no-repeat;
    --cutoff-border-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Csvg x='100%25' y='100%25' overflow='visible'%3E%3Cpath d='M-1 -9999 V-19 L-19 -1 H-9999' fill='none' stroke='%23FFF' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E%3Cpath d='M1 9999 V1 H9999' fill='none' stroke='%23FFF' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") bottom right no-repeat;
    --cutoff-fill-white-border-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Csvg x='100%25' y='100%25' overflow='visible'%3E%3Cpath d='M-1 -9999 V-19 L-19 -1 H-9999' fill='%23FFF' stroke='%23DF242B' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E%3Cpath d='M1 9999 V1 H9999' fill='none' stroke='%23DF242B' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") bottom right no-repeat;
    --cutoff-fill-red-border-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Csvg x='100%25' y='100%25' overflow='visible'%3E%3Cpath d='M-1 -9999 V-19 L-19 -1 H-9999' fill='%23DF242B' stroke='%23FFF' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E%3Cpath d='M1 9999 V1 H9999' fill='none' stroke='%23FFF' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") bottom right no-repeat;
    --cutoff-fill-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cpath d='M1 9999 V1 H9999' fill='none' stroke='%23DF242B' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3Csvg x='100%25' y='100%25' overflow='visible'%3E%3Cpath d='M-1 -9999 V-19 L-19 -1 H-9999' fill='%23DF242B' stroke='%23DF242B' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E%3C/svg%3E") bottom right no-repeat;
    --cutoff-fill-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cpath d='M1 9999 V1 H9999' fill='none' stroke='%23FFF' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3Csvg x='100%25' y='100%25' overflow='visible'%3E%3Cpath d='M-1 -9999 V-19 L-19 -1 H-9999' fill='%23FFF' stroke='%23FFF' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E%3C/svg%3E") bottom right no-repeat;
}

/*  grid  */
/* main > .grid .grid + .grid { margin-top: var(--gutter-y, 2rem); }*/

.grid > .wrapper { max-width: calc(var(--max-width, 84rem)); }
.grid-bgcolor-lightgrey { background-color: var(--color-light-grey, #F0F1F1); color: var(--color-text, #000000); }
.grid-bgcolor-mint { background-color: var(--color-mint, #DAF77B); color: var(--color-text, #000000); }
.grid-bgcolor-red { background-color: var(--color-red, #DF242B); color: var(--color-white, #FFFFFF); }
.grid-bgcolor-black { background-color: var(--color-black, #000000); color: var(--color-white, #FFFFFF); }
.grid-bgcolor-white-red-triangle:before { content: ''; position: absolute; top: -6vw; right: -7vw; width: 20vw; aspect-ratio: 900/765; background: url(../files/design/doppelecke-rot-weiss.svg) top right no-repeat; background-size: 100% auto; pointer-events: none; }
.grid-bgcolor-white-black-triangle:before { content: ''; position: absolute; top: -6vw; right: -7vw; width: 20vw; aspect-ratio: 900/765; background: url(../files/design/doppelecke-schwarz-weiss.svg) top right no-repeat; background-size: 100% auto; pointer-events: none; }



/*  card  */
.card-wrapper > .card { position: relative; background: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; isolation: isolate; }

.card-style-bullet-red { display: grid; grid-template-columns: 3rem 1fr; }
.card-style-bullet-red:before { content: ''; display: block; width: 0; height: 0; margin-top: .25rem; border: 1rem solid; border-color: var(--color-red, #DF242B) var(--color-red, #DF242B) transparent transparent; }

.card-style-bullet-red:not(:last-child) { margin-bottom: 2rem; }
.masonry-column > .card-style-bullet-red:not(:last-child) { margin-bottom: 0; }

.card-style-logos:not(:first-child) { margin-top: 2rem; }
.card-style-logos > .card { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, calc((100% - var(--gutter-x, 2rem)) / var(--min-columns, 2))), 1fr)); gap: 2rem; background: var(--color-white, #FFFFFF); padding: var(--columns-gutter-y, 1rem) var(--columns-gutter-x, 1rem); justify-content: center; align-items: center; }
.card-style-logos > .card .image { width: auto; align-items: center}
.card-style-logos > .card .image img { width: auto; height: auto; max-width: 10rem; max-height: 5rem; }

.card-style-reference { flex-flow: column nowrap; }
.card-style-reference:first-child:last-child { min-height: 0; }
.card-style-reference:after { content: ''; display: block; width: 0; height: 0; border: 1rem solid; border-color: var(--color-red, #DF242B) transparent transparent var(--color-red, #DF242B); margin-top: 1rem; }
.card-style-reference > .card { background: var(--cutoff-border-red); padding: 2em; box-sizing: border-box; }

.card-style-charity { flex-flow: column nowrap; }
.card-style-charity > .card { padding: 2rem 4rem 4rem 2rem; box-sizing: border-box; color: var(--color-white, #FFFFFF); }
.card-style-charity > .card:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: rgb(223 36 43 / .9); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6rem), calc(100% - 6rem) 100%, 0 100%); }



/*  hero  */
.hero {
    --header-height: calc(var(--logo-height, 5rem) + var(--header-padding-y, 1rem));
}
@media (min-width: 48.01rem) {
    .hero { padding-bottom: 0; }
    .hero > .content { justify-content: flex-end; }
    .hero > .image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
    .hero > .content > .wrapper { position: relative; width: 30rem; max-width: 100%; min-height: 14rem; margin: calc(var(--header-height, 0rem) + 5rem) 0 0 auto; padding: 6rem 2rem 2rem 8rem; color: var(--color-white, #FFFFFF); }
    .hero > .content > .wrapper:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: rgb(0 0 0 / .9); clip-path: polygon(0 18rem, 18rem 0, 100% 0, 100% 100%, 0 100%, 0 max(10rem, 100% - 2rem)); }
    .hero > .content > .wrapper > :is(h1, h2, h3, h4):first-child { text-transform: none; isolation: isolate; }
    .hero > .content > .wrapper > :is(h1, h2, h3, h4):first-child:before { content: ''; display: block; position: absolute; width: 0; height: 0; margin: -.75rem 0 .5rem -1.25rem; z-index: -1; border: 2.5rem solid; border-color: var(--color-red, #DF242B) transparent transparent var(--color-red, #DF242B); }
    .hero.hero-color-red > .content > .wrapper:before { background: rgb(223 36 43 / .9); }
}

@media (max-width: 48rem) {
    .hero { margin-bottom: -1px; /* fix additional blank line in Firefox */ }
    .hero :is(h1, h2, h3, h4) { word-break: break-word; /* hyphens: auto; */ }
    .hero { flex-flow: column-reverse nowrap; padding: 0; background: var(--color-black, #000000); color: var(--color-white, #FFFFFF); }
    .hero > .content { align-items: flex-start; padding: var(--gutter-y, 2rem) var(--gutter-x, 2rem); margin-top: var(--header-height, 0rem); }
    .hero > .image { clip-path: polygon(0 10vw, 10vw 0, 100% 0, 100% 100%, 0 100%); aspect-ratio: 16/9; }
    .hero > .content > .wrapper > p:nth-child(2) { text-transform: none; isolation: isolate; padding-left: 3rem; }
    .hero > .content > .wrapper > p:nth-child(2):before { content: ''; display: block; position: absolute; width: 0; height: 0; margin: 0.325em 0 .5rem -3rem; z-index: -1; border: 1rem solid; border-color: var(--color-red, #DF242B) transparent transparent var(--color-red, #DF242B); }
}




/*  masonry  */
/*
.masonry { margin: 0 auto; padding: .5rem; max-width: 1680px; }
.masonry-column > * { margin: .5rem !important; }
*/
.masonry {
    --masonry-gap-x: var(--columns-gutter-x, 1rem);
    --masonry-gap-y: 2rem;
}
.masonry-column > *:not(:first-child) { margin-top: 0rem !important; }



/*  slider  */
.slider { background: var(--color-black, #000000); color: var(--color-white, #FFFFFF); margin: 0; text-align: left; }
@media (min-width: 32rem) {
    .slider:after { content: ''; position: absolute; display: block; left: 2rem; bottom: 0; width: 8rem; aspect-ratio: 181/64; background: url(../files/design/dreiecke.svg) left bottom no-repeat; background-size: contain; z-index: 1; pointer-events: none; }
}

.slider .viewport { position: relative; }

.slider .inner .box { background: transparent; color: inherit; text-align: left; padding: 0; }

.slider .pagination { bottom: .5rem; }
.slider .pagination button { width: .75rem; height: .75rem; background: var(--color-white, #FFFFFF); border: 0; transform: scale(1); opacity: 1; transition: transform .25s ease, border .25s ease, background .25s ease; }
.slider .pagination button:hover { transform: scale(1.5); }
.slider .pagination button.active { background: var(--color-red, #DF242B); }

.slider button:is(.previous, .next) { width: 1.75rem; height: 4rem; margin-top: -2rem; }
.slider button:is(.previous, .next):before { width: .75rem; height: .75rem; border-width: .2rem; }

@media (min-width: 64.01rem) {
    .slider .viewport { aspect-ratio: 2.5; }
    .slider .wrapper { height: 100%; }
    .slider .slide { height: 100%; }
    .slider .inner { display: block; padding: 0 0 0 16rem; isolation: isolate; }
    .slider .inner .image { position: absolute; display: block; width: 70%; height: 100%; left: auto; right: 0; clip-path: polygon(min(var(--max-width), 35vw) 0, 100% 0, 100% 100%, 0 100%, 0 min(var(--max-width), 35vw)); z-index: -1; }
    .slider .inner .image :is(img, picture) { width: 100%; height: 100%; object-fit: cover; }
    .slider .inner .box { display: flex; width: 35%; min-height: 70%; flex-flow: column nowrap; justify-content: center; }
    .slider .inner .box .title { font-family: 'Arvo', serif; font-size: max(2rem, min(5rem, 4vw)); font-weight: 700; line-height: 1.125; text-transform: uppercase; }
    .slider .inner .box .text { font-size: max(1rem, min(2rem, 1.5vw)); width: 75%; }
    .slider .inner .box .text:before { content: ''; display: block; width: 0; height: 0; border: 1rem solid; border-color: var(--color-red, #DF242B) transparent transparent var(--color-red, #DF242B); margin-bottom: .5rem; }
}
@media (max-width: 64rem) {
    .slider button:is(.previous, .next) { display: none; }
    .page-1 .slider { padding-top: calc(var(--logo-height, 5rem) * 84/48); }
    .slider .wrapper { height: 100%; align-items: flex-end; }
    .slider .slide { height: 100%; }
    .slider .inner { flex-flow: column-reverse nowrap; padding: 0; align-items: flex-start; background: var(--color-black, #000000); color: var(--color-white, #FFFFFF); }
    .slider .image { position: relative; clip-path: polygon(0 10vw, 10vw 0, 100% 0, 100% 100%, 0 100%); aspect-ratio: 16/9; }
    .slider .inner .image :is(img, picture) { width: 100%; height: 100%; object-fit: cover; }
    .slider .inner .box { align-items: flex-start; padding: var(--gutter-y, 2rem) var(--gutter-x, 2rem); }
    .slider .inner .box .title { font-family: 'Arvo', serif; font-size: 2rem; font-weight: 700; line-height: 1.125; text-transform: uppercase; word-break: break-word; /* hyphens: auto; */ }
    .slider .inner .box .text { text-transform: none; isolation: isolate; padding-left: 3rem; }
    .slider .inner .box .text:before { content: ''; display: block; position: absolute; width: 0; height: 0; margin: 0.325em 0 .5rem -3rem; z-index: -1; border: 1rem solid; border-color: var(--color-red, #DF242B) transparent transparent var(--color-red, #DF242B); }
    .slider .inner .box .link { margin-left: 3rem; }
}



/*  hoverbox  */
.hoverbox + .hoverbox { margin-top: 1rem; }
.hoverbox { position: relative; padding: 0; margin: 0; container-type: inline-size; container-name: hoverbox; }
.hoverbox:hover { background: none; }
.hoverbox .wrapper { z-index: 1; text-shadow: 0 0 .25rem rgba(0, 0, 0, 1); font-weight: 600; }
.hoverbox .box { opacity: 1; transform: scale(1); background: none; }
.hoverbox .image img { transition: transform .5s ease, filter .5s ease; filter: none; }
.hoverbox:hover .image img, .hoverbox:active .image img { transition: transform .5s ease, filter .5s ease; transform: scale(1.1); filter: blur(1px); }
.hoverbox .link:focus-visible .box { outline: 2px solid var(--color-link-focus); }

.hoverbox-style-triangle-mint { display: grid; grid-template-columns: 100%; grid-template-rows: 1fr 3fr 2fr; gap: .5rem; aspect-ratio: 1; background: var(--color-white, #FFFFFF); padding: 1rem; isolation: isolate; /*box-shadow: 0 0 .5rem rgb(0 0 0 / .25);*/ }
.hoverbox-style-triangle-mint:hover { background: var(--color-white, #FFFFFF) }
.hoverbox-style-triangle-mint:before { content: ''; position: absolute; display: block; width: 100%; height: 100%; left: 0; top: 0; background: var(--color-mint, #DAF77B); clip-path: polygon(0 0, 100% 0, 0 100%); z-index: -1; }
.hoverbox-style-triangle-mint .image { overflow: visible; grid-row: 2; min-height: 0; padding: 0 1rem; box-sizing: border-box;}
.hoverbox-style-triangle-mint .image img { object-fit: contain; margin: 0 auto; max-height: 8rem; }
.hoverbox-style-triangle-mint:hover .image img { filter: none; }
.hoverbox-style-triangle-mint .wrapper { grid-row: 3; position: relative; left: auto; top: auto; right: auto; bottom: auto; text-shadow: none; padding: 1rem 1rem 0 1rem; }
.hoverbox-style-triangle-mint .box { padding: 0; color: var(--color-black, #000000); }
.hoverbox-style-triangle-mint .box .title { font-family: 'Arvo', serif; font-size: min(2rem, max(1.5rem, 10cqw)); text-transform: uppercase; line-height: 1; }
.hoverbox-style-triangle-mint .box .text { font-family: var(--font-family); font-size: min(1rem, max(1rem, 7.5cqw)); line-height: 1.125; font-weight: 500; }

.hoverbox-style-reference { display: grid; grid-template-columns: 100%; grid-template-rows: 1fr auto; gap: 1rem; padding: .5rem; box-sizing: border-box; background: var(--cutoff-border-red); color: var(--color-white, #FFFFFF); }
.hoverbox-style-reference:hover { background: var(--cutoff-fill-red); }
.hoverbox-style-reference .image { position: relative; overflow: clip; }
.hoverbox-style-reference .image:after { content: ''; position: absolute; bottom: -1rem; left: 0.25rem; width: 2rem; height: 2rem; transform: rotate(45deg); background: var(--color-black, #000000); }
.hoverbox-style-reference:hover .image:after { background: var(--color-red, #DF242B); }
.hoverbox-style-reference:hover .image img { filter: none; }
.hoverbox-style-reference .wrapper { position: relative; left: auto; top: auto; right: auto; bottom: auto; text-shadow: none; padding: 0; }
.hoverbox-style-reference .box { text-align: left; padding: 1rem; }
.hoverbox-style-reference .box .title { font-family: 'Arvo', serif; text-transform: uppercase; font-size: 1.5em; margin-bottom: 1rem; }
.hoverbox-style-reference .box .text > strong:first-child { display: block; font-family: 'Arvo', serif; font-size: 1.25em; margin-bottom: .5rem; }
.hoverbox-style-reference .box .text > strong:first-child + br { display: none; }

.hoverbox-style-product { display: grid; grid-template-columns: 100%; grid-template-rows: auto 1fr; gap: 0; padding: 0; align-items: flex-start; box-sizing: border-box; background: var(--color-white, #FFFFFF); color: var(--color-black, #000000); }
.hoverbox-style-product:hover { background: var(--color-white, #FFFFFF); }
.hoverbox-style-product .image { position: relative; overflow: clip; aspect-ratio: 4/3; }
.hoverbox-style-product:hover .image img { filter: none; }
.hoverbox-style-product .wrapper { position: relative; left: auto; top: auto; right: auto; bottom: auto; text-shadow: none; padding: 0; }
.hoverbox-style-product .box { overflow: hidden; width: 100%; text-align: left; padding: 1rem; color: var(--color-black, #000000); }
.hoverbox-style-product .box .title { font-family: 'Arvo', serif; text-transform: uppercase; font-size: 1.25em; margin-bottom: 1rem; line-height: 1.125; word-wrap: break-word; overflow-wrap: break-word; }
.hoverbox-style-product .box .text { font-weight: normal; margin-bottom: .75rem; }
.hoverbox-style-product .box:after { content: 'zum Produkt'; }



/*  link  */
.link { color: var(--color-link, #669900); text-decoration: underline; }
.link:hover { color: var(--color-link-hover, #669900); text-decoration: underline; }



/*  button  */
.button,
.hoverbox-style-product .box:after {
    position: relative;
    display: inline-block;
    padding: .5em 2em;
    border-radius: 0;
    border: 0;
    background: var(--button-regular-background, var(--cutoff-fill-red));
    color: var(--button-regular-color, var(--color-white, #FFFFFF));
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1rem);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: none;
    cursor: pointer;

}
.button:hover, .button:focus-visible,
.hoverbox-style-product:hover .box:after, .hoverbox-style-product:focus-visible .box:after {
    background: var(--button-hover-background, var(--cutoff-fill-white-border-red));
    color: var(--button-hover-color, var(--color-red, #DF242B));
}

.button.disabled { background: var(--color-grey); }
.button:focus-visible { outline: 2px solid var(--color-link-focus, #FFAA00); outline-offset: 2px; }
.button.disabled:hover, .button.disabled:focus-visible { background: var(--color-light-grey, #E9E9E9); cursor: default; }
/*
.button.mailformreset { background: var(--color-light-grey, #E9E9E9); color: #990000; }
.button.mailformreset:hover, .button.mailformreset:focus-visible { background: var(--color-light-green, #99BB33); color: var(--color-white); border: 0; box-shadow: none; }
*/

.button-style-outline-red,
.hoverbox-style-product .box:after {
    --button-regular-background: var(--cutoff-border-red);
    --button-regular-color: var(--color-red, #DF242B);
    --button-hover-background: var(--cutoff-fill-red);
    --button-hover-color: var(--color-white, #FFFFFF);
}
.button-style-outline-white {
    --button-regular-background: var(--cutoff-border-white);
    --button-regular-color: var(--color-white, #FFFFFF);
    --button-hover-background: var(--cutoff-fill-white);
    --button-hover-color: var(--color-red, #DF242B);
}

:not(.button-align-center) > .button-margin-top-negative { position: relative; display: block; margin-top: -6rem; }
.button-align-center:has(.button-margin-top-negative) { margin-top: -6rem; margin-bottom: 6rem; }

.pageroot .button-margin-top-negative { margin-top: 0; }



/*  mailform  */
.mailform .label .mandatory:after { content: '*'; color: var(--color-red, #DF242B); }
.mailform .message.success { border-color: var(--color-mint, #DAF77B); background-color: var(--color-mint, #DAF77B); }
.mailform form { display: flex; flex-flow: row wrap; justify-content: space-between; }
.mailform .group { width: 100%; }
.mailform .group:not(:first-child:last-child) { width: calc(50% - (var(--columns-gutter-x, 1rem) * .5)); }
.mailform .group:not(:last-child) { margin-bottom: 1rem; }
.mailform .valid .label::after { background-color: var(--color-green, #669900); }
.mailform .invalid .label::after { background-color: var(--color-red, #DF242B); }
.mailform .mailformtextarea { min-height: 14em; }



/*  image  */
.image-shape-triangle-red .shape { position: relative; overflow: clip; }
.image-shape-triangle-red .shape:after { content: ''; position: absolute; bottom: -1rem; left: 0.25rem; width: 2rem; height: 2rem; transform: rotate(45deg); background: var(--color-red, #DF242B); }
.image-shape-cutoff-top-left .shape { clip-path: polygon(0 3rem, 3rem 0, 100% 0, 100% 100%, 0 100%); }
.image-shape-cutoff-top-right .shape { clip-path: polygon(0 0, calc(100% - 3rem) 0, 100% 3rem, 100% 100%, 0 100%); }



/*  image with content  */
.imagewithcontent-shape-cutoff-edge > .content > .wrapper:before { content: ''; display: block; width: 0; height: 0; border: 1rem solid; border-color: var(--color-red, #DF242B) transparent transparent var(--color-red, #DF242B); margin-bottom: 1rem; }

.imagewithcontent[class*="imagewithcontent-layout-left-"] .image .shape { clip-path: polygon(0 0, calc(100% - 3rem) 0, 100% 3rem, 100% 100%, 0% 100%); }
.imagewithcontent[class*="imagewithcontent-layout-left-"] > .content > .wrapper:before { border-color: var(--color-red, #DF242B) transparent transparent var(--color-red, #DF242B); margin-right: auto; }

.imagewithcontent[class*="imagewithcontent-layout-right-"] .image .shape { clip-path: polygon(0 3rem, 3rem 0, 100% 0%, 100% 100%, 0% 100%); }
.imagewithcontent[class*="imagewithcontent-layout-right-"] > .content > .wrapper:before { border-color: var(--color-red, #DF242B) var(--color-red, #DF242B) transparent transparent; margin-left: auto; }

@container imagewithcontent (max-width: 48rem) { .imagewithcontent .content .wrapper { padding: var(--column-gutter-y, 1rem) 0 0 0; } }


/*  head  */
.head-size-tiny { font-size: 1.125em; }
.head-size-small { font-size: 1.25em; }
.head-size-medium { font-size: 1.625em; }
.head-size-large { font-size: 2.5em; }
.head-size-huge { font-size: 5em; line-height: 1; }
@media (max-width: 48rem) {
    .head-size-tiny { font-size: 1.125em; }
    .head-size-small { font-size: 1.25em; }
    .head-size-medium { font-size: 1.5em; }
    .head-size-large { font-size: 2em; }
    .head-size-huge { font-size: 2.75em; line-height: 1; }
}

.head-color-black { color: var(--color-black, #000000); }
.head-color-red { color: var(--color-red, #DF242B); }
.head-color-white { color: var(--color-white, #FFFFFF); }

.head-height-huge { padding-top: 33vw; margin-bottom: 1rem; text-shadow: 0 0 1rem rgb(0 0 0 / .25); }
@media (max-width: 48rem) {
    .head-height-huge { padding-top: 14rem; margin-bottom: 0;  }
}

.head-style-triangle-red:after { content: ''; display: block; width: 0; height: 0; border: 1rem solid; border-color: var(--color-red, #DF242B) transparent transparent var(--color-red, #DF242B); margin-top: .5rem; }



/*  text  */
.text-style-medium { font-size: calc(var(--font-size, 1rem) * 1.25); font-weight: 600; line-height: 1.25; }
.text-style-medium-thin { font-size: calc(var(--font-size, 1rem) * 1.25); font-weight: normal; line-height: 1.25; }
.text-style-medium-serif { font-family: 'Arvo', serif; font-size: calc(var(--font-size, 1rem) * 1.25); font-weight: 600; line-height: 1.25; }

.text-color-red { color: var(--color-red, #DF242B); }



/*  accordion menu  */
.accordion { border: 2px solid var(--color-light-grey); transition: border-color .3s ease; background: var(--color-white); }
.accordion.opened { border-color: var(--color-primary); }
.accordion-head { background: var(--color-white); border-bottom: 0; padding-right: 4rem; transition: border-color .3s ease; }
.accordion-head:focus { outline: none; }
.accordion-head:focus-visible { outline: 2px solid var(--color-link-focus); outline-offset: -4px; }
.accordion-head::after { content: 'i'; top: 50%; right: 1rem; margin-top: -1rem; width: 2rem; height: 2rem; line-height: 2rem; border-radius: 50%; font-size: 1.375rem; text-align: center; color: var(--color-white); background: #0076CC; transition: none; }
.accordion.opened .accordion-head::after { content: '+'; font-size: 3rem; color: var(--color-link); background: none; }
.accordion-content-wrapper { padding-top: 0; }
.accordion + .accordion { margin-top: -1em; }



/*  gallery  */
.gallery > *:not(.button) { padding: .5rem; }



/*  count up  */
.countup { position: relative; display: flex; justify-content: flex-start; align-items: center; gap: 0; aspect-ratio: 1; padding: 1.5rem; isolation: isolate; container-name: countup; container-type: inline-size; }
.countup:before { content: ''; position: absolute; display: block; width: 100%; height: 100%; left: 0; top: 0; background: var(--color-mint, #DAF77B); clip-path: polygon(0 0, 100% 0, 0 100%); z-index: -1; }
.countup > .number { font-size: min(10rem, max(2rem, 40cqw)); font-weight: bold; font-family: 'Arvo', serif; line-height: 1.25; color: var(--color-white, #FFFFFF); text-shadow: 0 0 .25rem rgb(0 0 0 / .5); }
.countup > .number > .prefix,  .countup > .number > .postfix { font-size: .625em; }
.countup > .caption { font-size: min(2rem, max(1.5rem, 10cqw)); font-weight: bold; font-family: 'Arvo', serif; line-height: 1.125; color: var(--color-black, #000000); }