/* stand-up-participate.de
------------------------------------------------ */



/* inter
-------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/inter-300-light.woff2) format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300;
  src: url(../fonts/inter-300-light-italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/inter-600-semibold.woff2) format('woff2');
}



/* color
-------------------------------------------------- */

:root {
  --gray-light: rgb(170, 170, 170);
  --gray-medium: rgb(85, 85, 85);
  --gray-heavy: rgb(0, 0, 0);
  --yellow: rgb(255, 204, 0);
}



/* basics
------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0; /* lists */
}

html {
  font-size: 100%; /* rem */
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.75; /* 28 */
}

img, video, audio {
  display: block;
  width: 100%;
}



/* font
------------------------------------------------ */

body {
  font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

strong {
  font-weight: 600;
}

h1, h2 {
  word-break: break-word;
}

p {
  word-break: break-word;
}

figcaption  {
  text-align: right;
  color: var(--gray-light);
}

.pagination-menu a  {
  font-weight: 600;
}



/* font
------------------------------------------------ */

h1 {
  font-size: 2.25rem; /* 36 */
  line-height: 1.167; /* 42 */
}

h2 {
  font-size: 1.5rem; /* 24 */
  line-height: 1.167; /* 28 */
}

h3, h4, h5, h6 {
  font-size: 1.25rem; /* 20 */
  line-height: 1.4; /* 28 */
}

figcaption {
  font-size: .875rem; /* 14 */
  line-height: 2; /* 28 */
}

@media screen and (min-width: 60em) { /* 960 */ /* 768 */
 h1 {
    font-size: 3rem; /* 48 */
    line-height: 1.167; /* 56 */
  }
}

/* font
------------------------------------------------ */

.blog h2,
.block-funders h2,
.block-related h2,
.pagination-menu a {
  font-size: 2.25rem; /* 36 */
  line-height: 1.167; /* 42 */
}



/* margin
------------------------------------------------ */

h1, h2, h3, h4, h5, h6,
figure, dl, ol, ul, p, pre {
  margin: 1.75rem 0; /* 28 */
}



/* lists
------------------------------------------------ */

ul, ol {
  list-style: none;
}

.copy-column ul,
.info-column ul,
.intro-column ul,
.modules-list ul {
  padding: 0 0 0 3.5rem;
  list-style: "\2014\0020";
}

.copy-column ol,
.info-column ol
.intro-column ol,
.modules-list ol {
  padding: 0 0 0 3.5rem;
}

.copy-column li,
.info-column li,
.intro-column li {
  margin: .875rem 0;
}



/* rule
------------------------------------------------ */

hr {
  border: none;
  border-top: 1px solid var(--gray-medium);
}



/* focus
------------------------------------------------ */

*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: 4px solid var(--gray-light);
  outline-offset: .21875rem; /* 3.5 */
}



/* links
------------------------------------------------ */

a {
  color: currentcolor;
  text-decoration: underline;
}

.header-menu a,
.pagination-menu a,
.block-headline a,
.block-featured a,
.block-related a,
.footer-contents a {
  text-decoration: none;
}

.header-menu a:hover,
.footer-contents a:hover {
  text-decoration: underline;
}



/* layout
------------------------------------------------ */

.header {
  padding: .875rem 0;
}

.article {
  padding: 3.5rem 0;
}

.footer {
  padding: .875rem 0;
  background: var(--yellow);
}

.block-featured,
.block-funders,
.block-related {
  padding: 3.5rem 0;
}



/* block-pagination
------------------------------------------------ */

.pagination-menu {
  display: flex;
  flex-wrap: wrap;
}

.pagination-menu .menu-link {
  flex-basis: 50%;
  padding: 0 1.75rem;
}

.pagination-menu .menu-link {
  flex-basis: 50%;
  padding: 0 1.75rem;
}

.pagination-menu .menu-link a {
  display: block;
}

.pagination-menu .menu-link .previous {
  text-align: right;
}

@media screen and (min-width: 48em) { /* 768 */
  .pagination-menu {
    padding: 0 1.75rem;
  }
}

@media screen and (min-width: 72em) { /* 1152 */
  .pagination-menu {
    padding: 0 calc(50% - 36rem) 0;
  }
}

/* block-featured
------------------------------------------------ */

.featured-column {
  display: flex;
  flex-wrap: wrap;
}

.featured-column .column-media,
.featured-column .column-text {
  flex-basis: 100%;
  padding: 0 1.75rem;
}

@media screen and (min-width: 48em) { /* 768 */
  .featured-column {
    padding: 0 1.75rem;
  }
  .featured-column .column-media,
  .featured-column .column-text {
    flex-basis: 50%;
  }
}

@media screen and (min-width: 72em) { /* 1152 */
  .featured-column {
    padding: 0 calc(50% - 36rem) 0;
  }
}

.block-featured {
  position: relative;
}

.block-featured a::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

/* block-related
------------------------------------------------ */

.related-column {
  display: flex;
  flex-wrap: wrap;
  padding: 1.75rem 0;
}

.related-column .column-media,
.related-column .column-text {
  flex-basis: 100%;
    padding: 0 1.75rem;
}

@media screen and (min-width: 48em) { /* 768 */
  .related-column {
    padding: 0 1.75rem;
  }
  .related-column .column-media {
    flex-basis: 50%;
    order: 2;
  }
  .related-column .column-text {
    flex-basis: 50%;
    order: 1;
  }
}

@media screen and (min-width: 72em) { /* 1152 */
  .related-column {
    padding: 0 calc(50% - 36rem) 0;
  }
}

/* block-headline
------------------------------------------------ */

.headline-column .column-text {
  padding: 0 1.75rem;
}

@media screen and (min-width: 48em) { /* 768 */
  .headline-column {
    padding: 0 1.75rem;
  }
}

@media screen and (min-width: 60em) { /* 960 */
  .blog .headline-column,
  .article-site .headline-column {
    padding: 0 calc(50% - 24rem) 0;
  }
}

@media screen and (min-width: 72em) { /* 1152 */
  .category .headline-column {
    padding: 0 calc(50% - 36rem) 0;
  }
}

/* block-heading
------------------------------------------------ */

.heading-column .column-text {
  padding: 0 1.75rem;
}

@media screen and (min-width: 48em) { /* 768 */
  .heading-column {
    padding: 0 1.75rem;
  }
}

@media screen and (min-width: 60em) { /* 960 */
  .heading-column {
    padding: 0 calc(50% - 24rem) 0;
  }
}

/* block-copy
------------------------------------------------ */

.copy-column .column-text {
  padding: 0 1.75rem;
}

@media screen and (min-width: 48em) { /* 768 */
  .copy-column {
    padding: 0 1.75rem;
  }
}

@media screen and (min-width: 60em) { /* 960 */
  .copy-column {
    padding: 0 calc(50% - 24rem) 0;
  }
}

/* block-audios
------------------------------------------------ */

.audios-columns {
  display: flex;
  flex-wrap: wrap;
}

.audios-column {
  flex-basis: 100%;
  padding: 0 1.75rem;
}

@media screen and (min-width: 48em) { /* 768 */
  .audios-columns {
    padding: 0 1.75rem;
  }
}

@media screen and (min-width: 60em) { /* 960 */
  .audios-columns {
    padding: 0 calc(50% - 24rem) 0;
  }
}

/* block-reels
------------------------------------------------ */

.reels-columns figure {
  margin: 0; /* figure reset */
}

.reels-columns {
  display: flex;
  flex-wrap: wrap;
}

.reels-column {
  flex-basis: 100%;
  padding: .875rem 1.75rem;
}

@media screen and (min-width: 36em) { /* 576 */
  .reels-columns {
    padding: 0 calc(50% - 12rem) 0;
  }
}

/* block-videos
------------------------------------------------ */

.videos-columns figure {
  margin: 0; /* figure reset */
}

.videos-columns {
  display: flex;
  flex-wrap: wrap;
}

.videos-column {
  flex-basis: 100%;
  padding: .875rem 1.75rem;
}

@media screen and (min-width: 48em) { /* 768 */
  .videos-columns {
    padding: 0 1.75rem;
  }
}

@media screen and (min-width: 60em) { /* 960 */
  .videos-columns {
    padding: 0 calc(50% - 24rem) 0;
  }
}

/* block-youtube
------------------------------------------------ */

.youtube-columns {
  display: flex;
  flex-wrap: wrap;
}

.youtube-column {
  flex-basis: 100%;
}

.youtube-column iframe {
  border: none;
  background-color: rgba(255, 255, 0, 1);
}

/* https://www.w3schools.com/howto/howto_css_responsive_iframes.asp */
.youtube-column figure {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:09 */
}

/* https://www.w3schools.com/howto/howto_css_responsive_iframes.asp */
.youtube-column iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 60em) { /* 960 */
  .youtube-columns {
    padding: 0 calc(50% - 24rem) 0;
  }
}

/* block-images
------------------------------------------------ */

.images-columns figure {
  margin: 0; /* figure reset */
}

.images-columns {
  display: flex;
  flex-wrap: wrap;
}

.images-column {
  flex-basis: 100%;
  padding: .875rem 1.75rem;
}

@media screen and (min-width: 48em) { /* 768 */
  .images-columns {
    padding: 0 1.75rem;
  }
}

@media screen and (min-width: 60em) { /* 960 */
  .images-columns {
    padding: 0 calc(50% - 24rem) 0;
  }
}

/* block-funders (ul)
------------------------------------------------ */

.funders-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0; /* ul reset */
}

.funders-item {
  flex-basis: 100%;
  padding: 0 1.75rem;
}

@media screen and (min-width: 36em) { /* 576 */
  .funders-item {
    flex-basis: 50%;
  }
}

@media screen and (min-width: 48em) { /* 768 */
  .funders-list {
    padding: 0 1.75rem;
  }
}

@media screen and (min-width: 60em) { /* 960 */
  .funders-list {
    padding: 0 calc(50% - 24rem) 0;
  }
}

/* block-modules (ul)
------------------------------------------------ */

.modules-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0; /* ul reset */
}

.modules-item {
  flex-basis: 100%;
  padding: 0 1.75rem;
}

@media screen and (min-width: 48em) { /* 768 */
  .modules-list {
    padding: 0 1.75rem;
  }
  .modules-item {
    flex-basis: 50%;
  }
}

@media screen and (min-width: 60em) { /* 960 */
  .modules-list {
    padding: 0 calc(50% - 24rem) 0;
  }
}

/* block-reviews (ul)
------------------------------------------------ */

.reviews-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0; /* ul reset */
}

.reviews-item {
  flex-basis: 100%;
  padding: 0 1.75rem;
}

@media screen and (min-width: 48em) { /* 768 */
  .reviews-list {
    padding: 0 1.75rem;
  }
  .reviews-item {
    flex-basis: 50%;
  }
}

@media screen and (min-width: 60em) { /* 960 */
  .reviews-list {
    padding: 0 calc(50% - 24rem) 0;
  }
}

/* block-team (ul)
------------------------------------------------ */

.team-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0; /* ul reset */
}

.team-item {
  flex-basis: 100%;
  padding: 0 1.75rem;
}

@media screen and (min-width: 48em) { /* 768 */
  .team-list {
    padding: 0 1.75rem;
  }
  .team-item {
    flex-basis: 50%;
  }
}

@media screen and (min-width: 60em) { /* 960 */
  .team-list {
    padding: 0 calc(50% - 24rem) 0;
  }
}

/* block-booklet
------------------------------------------------ */

.booklet-column {
  display: flex;
  flex-wrap: wrap;
}

.booklet-column > * {
  flex-basis: 100%;
  padding: 0 1.75rem;
}

@media screen and (min-width: 48em) { /* 768 */
  .booklet-column {
    padding: 0 1.75rem;
  }
  .booklet-column > * {
    flex-basis: 50%;
  }
}

@media screen and (min-width: 60em) { /* 960 */
  .booklet-column {
    padding: 0 calc(50% - 24rem) 0;
  }
}

/* site-header
------------------------------------------------ */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.header-identity,
.header-menu {
  flex-basis: 100%;
  padding: 0 1.75rem;
}

.header-identity img {
  max-width: 12.5rem; /* 16 - (2 * 1.75) */
}

.menu-list {
  margin: 0; /* ul reset */
}

.menu-item {
  display: inline-block;
  margin: 0 .875rem 0 0;
}

@media screen and (min-width: 48em) { /* 768 */
  .site-header {
    padding: 0 1.75rem;
  }
  .header-identity {
    flex-basis: 33.333%; /* 16 */
  }
  .header-menu {
    flex-basis: 66.667%; /* 32 */
  }
}

@media screen and (min-width: 48em) { /* 768 */
  .menu-list {
    text-align: right;
  }
  .menu-item {
    margin: 0 0 0 .875rem;
  }
}

@media screen and (min-width: 72em) { /* 1152 */
  .site-header {
    padding: 0 calc(50% - 36rem) 0;
  }
}

/* site-footer
------------------------------------------------ */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  padding: 1.75rem 0;
}

.footer-contents,
.footer-social {
  flex-basis: 100%;
  padding: 0 1.75rem;
}

.footer-contents img {
  max-width: 20.5rem; /* 24 - (2 * 1.75) */
}

.social-list {
  margin: 0;  /* ul reset */
}

.social-item {
  display: inline-block;
  width: 2.625rem;
  margin: 0 .875rem 0 0;
}

@media screen and (min-width: 48em) { /* 768 */
  .site-footer {
    padding: 0 1.75rem;
  }
  .footer-contents {
    flex-basis: 50%; /* 24 */
  }
}

@media screen and (min-width: 72em) { /* 1152 */
  .site-footer {
    padding: 0 calc(50% - 36rem) 0;
  }
}