@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');

/* ==================================================
   VARIABLES
================================================== */

:root {
    font-size: clamp(9px, 1vw, 1vw);

    --color-red: #e64115;
    --color-green: #108886;
    --color-green-light: #47a3a2;
    --color-green-grey: #c6dac8;

    --color-background: #f3efd9;

    --color-text: #111;
    --color-text-light: #666;

    --transition: 0.25s ease;
    --main-width: 64vw;
    --padding-box: .5vw;
    
}


/* ==================================================
   RESET
================================================== */

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

html, body {
  overflow-x: hidden;
  
}
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Lato", sans-serif;
    color: var(--color-text);
    background: var(--color-background);
    display: flex;
    align-items: center;    
    flex-direction: column;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
  opacity: .6;
}

.main-navigation h1 {
    all: unset;
}


/* ==================================================
   ACCESSIBILITY
================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


.site-header {
  position: fixed;
  height: auto;
  z-index: 10;
}


/* ==================================================
   HERO
================================================== */

.hero {
  width: 100vw;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  margin-left: 1em;
}

.hero__image {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.hero__image img {
  width: 100vw;
  object-fit: cover;
}


.hero__logo {
  position: absolute;
  top: 8vw;
  left: 3vw;
  width: 40vw;
  height: auto;
  z-index: 10;

}

.hero__logo img {
  width: 100%;
  height: auto;
}

.hero__logo .hero__logo__cast {
  margin-bottom: 4vw;
}

.hero__logo .hero__logo__title {

}

.hero__logo .hero__logo__director {
  margin-top: 2vw;
}


/* ==================================================
   NEWS TICKER
================================================== */

.news-ticker {
  position: absolute;
  top: 2vw;
  left: 2vw;
  display: flex;
  align-items: center;
  height: 2.5vw;
  width: calc(100vw - 7vw);
  padding: .5vw 1vw;
  background-color: var(--color-red);
  color: #fff;
  border-radius: 1.25vw;
  overflow: hidden;
  white-space: nowrap;
}

.news-ticker::before,
.news-ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3rem;
  z-index: 2;
  pointer-events: none;
}

.news-ticker::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--color-red) 0%,
    transparent 100%
  );
}

.news-ticker::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--color-red) 0%,
    transparent 100%
  );
}


.news-ticker__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.news-ticker__group {
  display: flex;
  flex-shrink: 0;
}

.news-ticker__item {
  display: inline-block;
  flex-shrink: 0;
  padding-right: 2rem;
}

.news-ticker__item::after {
  content: "  + + +  ";
  margin-left: 2rem;
}

.news-ticker__item a:hover {
  opacity: .9;
  font-weight: 700;
}




/* ==================================================
   HAUPTNAVIGATION
================================================== */

.main-navigation {
  z-index: 30;
  position: relative;
  width: 102vw;
  height: 3vw;
  margin-top: -1.5vw;
  display: flex;
  justify-content: center;
  transform: rotate(-2deg) translateX(-1vw);
  align-items: center;
  background-color: var(--color-green);
  color: #fff;
  font-size: 1.3em;
}


/* Navigation Liste */

.main-navigation__list {
  display: flex;
  list-style: none;
  justify-content: space-between;
  align-items: center;
  width: 70vw;
  padding: 0;
  margin: 0;
}

/* Navigation Links */

.main-navigation__list li {
  height: 3vw;
  display: flex;
  align-items: center;
  padding: 0 1vw;
  border-radius: 1.5vw;
}

.main-navigation__list li.active {
  height: 3.9vw;
  border-radius: 2.2vw;
  padding: 0 2vw;
  font-size: 1.2em;
  background-color: var(--color-background);
  color: var(--color-red);
  box-shadow: 0px 0 .25rem .25rem rgba(0,0,0,0.05);
  transition: border-radius 0.45s ease;
}


.main-navigation__list a {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 900;
  transition: opacity 0.1s ease;
}

.main-navigation__list .first-word {
  font-weight: 900;
}

.main-navigation__list a:hover {
  opacity: .7;
}



/* ==================================================
   ANKER-NAVIGATION
================================================== */

.anchor-navigation {
  z-index: 20;
  position: relative;
  width: 102vw;
  height: 3vw;
  display: flex;
  justify-content: center;
  transform: rotate(-2deg) translateX(-1vw);
  align-items: center;
  background-color: var(--color-green-grey);
  color: var(--color-green);
  font-size: 1.3em;
  box-shadow: 0px 0 .25rem 0px rgba(0,0,0,0.1);
}


/* Anchor List */

.anchor-navigation__list {
  display: flex;
  gap: 3vw;
  justify-content: center;
  list-style: none;
  align-items: center;
  width: 60vw;
  padding: 0;
  margin: 0;
  
}


/* Anchor Links */

.anchor-navigation__list a {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  transition: opacity 0.1s ease
}

.anchor-navigation__list a:hover {
  opacity: .7;

}



/* ==================================================
   SHRINKING HEADER
================================================== */

/* Ausgangszustand */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;

  /* Animation der gesamten Header-Höhe */
  transition: height 0.45s ease;
}

/* Hero */
.hero {
  height: 34vw;
  overflow: hidden;
  transition: height 0.45s ease;
}

.hero .hero__image {
  transition:
    margin 0.45s ease;
}

.hero .hero__image img{
  transition:
    height 0.45s ease;
}

/* Logo-Position und Größe animieren */
.hero__logo {
  transition:
    top 0.45s ease,
    left 0.45s ease,
    width 0.45s ease;
}

.hero__logo__cast,
.hero__logo__director {
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    margin 0.3s ease;
}

/* Titel separat skalieren */
.hero__logo__title {
  transition:
    width 0.45s ease,
    transform 0.45s ease;
}

/* Newsticker verschwindet nach oben */
.news-ticker {
  transition:
    transform 0.45s ease,
    opacity 0.3s ease,
    visibility 0.3s ease;
}

/* Navigationen bleiben im Aufbau gleich */
.main-navigation,
.anchor-navigation {
  transition: margin-top  0.45s ease, transform 0.45s ease;
}


/* ==================================================
   KOMPAKTER HEADER BEIM SCROLLEN
================================================== */

.site-header.is-compact .hero {
  height: 2vw;
}

.site-header.is-compact .hero .hero__image {
  margin-top: -9vw;
}


/* Logo links oben kleiner positionieren */
.site-header.is-compact .hero__logo {
  top: 0;
  left: 0vw;
  width: 15vw;
  height: 6.5vw;
  z-index: 60;
  position: fixed;
  background: linear-gradient(90deg,rgba(243, 239, 217, .8) 0%, rgba(243, 239, 217, .8) 48%, rgba(243, 239, 217, 0) 100%);
}

/* Cast und Director ausblenden */
.site-header.is-compact .hero__logo__cast,
.site-header.is-compact .hero__logo__director {
  opacity: 0;
  visibility: hidden;
  margin: 0;
}

/* Titel-Logo kompakter darstellen */
.site-header.is-compact .hero__logo__title {
  width: 100%;
  transform: scale(.95);
  transform-origin: left center;
  margin-left: 0vw;
  margin-top: 0.5vw;
}

/* Newsticker nach oben aus dem sichtbaren Bereich bewegen */
.site-header.is-compact .news-ticker {
  transform: translateY(-150%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Hauptnavigation nach oben verschieben */
.site-header.is-compact .main-navigation {
  margin-top: -2vw;
  transform: rotate(0deg) translateX(-1vw);
}

/* Ankernavigation direkt darunter halten */
.site-header.is-compact .anchor-navigation {
  margin-top: -.05vw;
  transform: rotate(0deg) translateX(-1vw);
}

.site-header.is-compact .main-navigation__list li.active {
  border-radius: 0 0 2.2vw 2.2vw;
}


/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header *,
  .site-header *::before,
  .site-header *::after {
    transition-duration: 0.01ms !important;
  }
}


/* ==================================================
   MAIN CONTENT
================================================== */

.main-content {
  width: var(--main-width);  display: flex;
  flex-direction: column;
}

.main-content > figure {
  margin: 1rem 0 3rem 0;
}

.main-content > figure iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
}

/* ==================================================
   TEXT&IMAGE BLOCK
================================================== */
.main-content > p
{
  font-size: 1.5rem;
  line-height: 1.5em;
}

.main-content > .textandimage {
  grid-column: 1 / 9;
  display: grid;
  gap: 2em;
  margin: 1rem 0 3rem 0;
}

.main-content .textandimage__image {
  grid-column: 1 / 5;
}

.main-content .textandimage__text {
  grid-column: 5 / 9;
  font-size: 1.5rem;
  line-height: 1.5em;
}

.main-content .textandimage__text h2 {
  margin: .5em 0;
}

/* ==================================================
   PERASONBOXES BLOCK
================================================== */

.main-content .personboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2vw;
  margin: 1rem 0 3rem 0;
}

.main-content .personboxes .person {
  padding: 1vw;
  background-color: var(--color-green-grey);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1vw;
  
}

.main-content .personboxes .person_image {
  background-color: #aed0c0;
  aspect-ratio: 4/5;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.main-content .personboxes .person_image ing {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-content .personboxes .person_image .copyright {
  position: absolute;
  font-size: 0.65em;
  color: #555;
  bottom: .7em;
  right: .5em;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  opacity: .6;
}


.main-content .personboxes .person_text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 3rem;
}
.main-content .personboxes .person_text div:first-child {  
  font-size: 1.7rem;
}

.main-content .personboxes .person_text div:nth-child(2) {  
  font-size: 1.2rem;
  margin-top: .25em;
}


/* ==================================================
   IMAGE GALLEREY  BLOCK
================================================== */

.imagegallery {
  margin: 2rem 0 2rem 0;
}
.imagegallery.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.imagegallery.carousel .image_wrapper {
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 100%;
  transition: transform 500ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.imagegallery.carousel .image_container {
  flex: 0 0 80%;
  width: 80%;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.imagegallery.carousel .image_container img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Aktives Bild */
.imagegallery.carousel .image_container.is-active {
  cursor: zoom-in;
}

/* Navigation */
.imagegallery.carousel .gallery_prev,
.imagegallery.carousel .gallery_next {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: #111;
  cursor: pointer;
  font-size: 24px;
}

.imagegallery.carousel .gallery_prev {
  left: 1rem;
}

.imagegallery.carousel .gallery_next {
  right: 1rem;
}

.imagegallery.carousel button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Lightbox */
.gallery_lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  background: rgba(0, 0, 0, .94);
}

.gallery_lightbox[hidden] {
  display: none;
}

.gallery_lightbox img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 90vw;
  height: auto;
  object-fit: contain;
}


/* Gemeinsame Button-Basis */
.imagegallery.carousel .gallery_prev,
.imagegallery.carousel .gallery_next,
.gallery_lightbox .lightbox_close,
.gallery_lightbox .lightbox_prev,
.gallery_lightbox .lightbox_next {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* Carousel-Pfeile */
.imagegallery.carousel .gallery_prev,
.imagegallery.carousel .gallery_next {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  background: transparent;
  color: #fff;
  transform: translateY(-50%);
}

.imagegallery.carousel .gallery_prev {
  left: 1rem;
}

.imagegallery.carousel .gallery_next {
  right: 1rem;
}

/* Pfeile als CSS-Bordüren */
.gallery_prev::before,
.gallery_next::before,
.lightbox_prev::before,
.lightbox_next::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.gallery_prev::before,
.lightbox_prev::before {
  transform: rotate(-135deg);
  margin-left: 4px;
}

.gallery_next::before,
.lightbox_next::before {
  transform: rotate(45deg);
  margin-right: 4px;
}

/* Lightbox-Buttons */
.gallery_lightbox .lightbox_close,
.gallery_lightbox .lightbox_prev,
.gallery_lightbox .lightbox_next {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  background: rgba(40, 40, 40, 0.75);
  color: #fff;
}

/* Positionen in der Lightbox */
.gallery_lightbox .lightbox_close {
  top: 1rem;
  right: 1rem;
}

.gallery_lightbox .lightbox_prev {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.gallery_lightbox .lightbox_next {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Kreuz zum Schließen */
.gallery_lightbox .lightbox_close::before,
.gallery_lightbox .lightbox_close::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.gallery_lightbox .lightbox_close::before {
  transform: rotate(45deg);
}

.gallery_lightbox .lightbox_close::after {
  transform: rotate(-45deg);
}

/* Hover und Tastaturfokus */
.imagegallery.carousel .gallery_prev:hover,
.imagegallery.carousel .gallery_next:hover {
  opacity: .5;
}

.gallery_lightbox .lightbox_close:hover,
.gallery_lightbox .lightbox_prev:hover,
.gallery_lightbox .lightbox_next:hover {
  background: rgba(80, 80, 80, 0.95);
}

.imagegallery.carousel button:focus-visible,
.gallery_lightbox button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.gallery_lightbox .lightbox_close {
  top: 1rem;
  right: 1rem;
}

.gallery_lightbox .lightbox_prev {
  left: 1rem;
  top: 50%;
}

.gallery_lightbox .lightbox_next {
  right: 1rem;
  top: 50%;
}

@media (max-width: 600px) {
  .imagegallery.carousel .image_container {
    flex-basis: 80%;
  }

  .imagegallery.carousel .gallery_prev {
    left: .5rem;
  }

  .imagegallery.carousel .gallery_next {
    right: .5rem;
  }

  .gallery_lightbox {
    padding: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .imagegallery.carousel .image_wrapper {
    transition: none;
  }
}

.imagegallery.gridcarousel .image_wrapper,
.imagegallery.carousel .image_wrapper {
  touch-action: pan-y;
}


/* GRIDCAROUSEL */
.imagegallery.gridcarousel {
  --visible-items: 3;
  --gallery-gap: 1rem;
  --gallery-arrow-size: 44px;

  display: grid;
  grid-template-columns:
    var(--gallery-arrow-size)
    minmax(0, 1fr)
    var(--gallery-arrow-size);
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* Bildstrecke: genau die verfügbare mittlere Spalte */
.imagegallery.gridcarousel .image_wrapper {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: stretch;
  gap: var(--gallery-gap);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: transform 500ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
  touch-action: pan-y;
}

/* Überschreibt auch eine eventuell vorhandene 80%-Regel */
.imagegallery.gridcarousel .image_container {
  display: block;
  flex: 0 0 calc(
    (100% - (var(--visible-items) - 1) * var(--gallery-gap))
    / var(--visible-items)
  );
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  cursor: zoom-in;
}

.imagegallery.gridcarousel .image_container img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  object-fit: cover;
}

/* Buttons: bewusst nicht absolut positioniert */
.imagegallery.gridcarousel .gallery_prev,
.imagegallery.gridcarousel .gallery_next {
  position: relative;
  inset: auto;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  z-index: 5;

  display: grid !important;
  place-items: center;
  justify-self: center;
  align-self: center;

  width: var(--gallery-arrow-size);
  height: var(--gallery-arrow-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.imagegallery.gridcarousel .gallery_prev {
  grid-column: 1;
  grid-row: 1;
}

.imagegallery.gridcarousel .gallery_next {
  grid-column: 3;
  grid-row: 1;
}

/* CSS-Pfeile */
.imagegallery.gridcarousel .gallery_prev::before,
.imagegallery.gridcarousel .gallery_next::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.imagegallery.gridcarousel .gallery_prev::before {
  transform: rotate(-135deg);
  margin-left: 4px;
}

.imagegallery.gridcarousel .gallery_next::before {
  transform: rotate(45deg);
  margin-right: 4px;
}

.imagegallery.gridcarousel .gallery_prev:hover,
.imagegallery.gridcarousel .gallery_next:hover {
  opacity: .6;
}

.imagegallery.gridcarousel button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Responsive: Anzahl bei Bedarf anpassen */
@media (max-width: 700px) {
  .imagegallery.gridcarousel {
    --visible-items: 2;
    --gallery-gap: 0.5rem;
    --gallery-arrow-size: 34px;
    gap: 0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .imagegallery.gridcarousel .image_wrapper {
    transition: none;
  }
}

/* ==================================================
   BUTTON  BLOCK
================================================== */
.blockbutton {
  margin: 0rem 0 3rem 0;
}

.blockbutton a {
  height: 4rem;
  background-color: var(--color-green);
  color: #fff;
  border-radius: 2rem;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  position: relative;
  width: fit-content;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* ==================================================
   CONTENTBOXES BLOCK
================================================== */

.main-content .contentboxes {
  margin: 2rem 0 3rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2vw;
}

.main-content .contentboxes .item {
  padding: 1.1vw 1.5vw 1.5vw 1.5vw;
  background-color: var(--color-green-grey);
  font-size: 1.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}



.main-content .contentboxes .item .title {
  font-size: 1.5em;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: 1;
}

.main-content .contentboxes .subline {
  font-size: 1.2em;
  font-weight: 500; 
  margin-bottom: .5em;
}

.main-content .contentboxes .item .pfeil {
  display: inline-block;
  display: block;
  width: 1em;
  height: 1em;
  border-top: .2em solid var(--color-green);
  border-right: .2em solid var(--color-green);
  transform: rotate(45deg);
}


/* ==================================================
   Zitate BLOCK
================================================== */

.main-content .zitate {
  margin: 2rem 0 3rem 0;
}

.main-content .zitate.above .zitat  {
  width: 80%;
}

.main-content .zitate.above .zitat:nth-child(2n)  {
  margin-left: 20%;
}

.main-content .zitate .zitat {
  padding: 1.5vw 1.5vw .5vw 1.5vw;
  background-color: var(--color-green-grey);
  
  margin-bottom: 1rem;
}

.main-content .zitat_text {
  font-size: 1.4rem;
  line-height: 1.4em;
  font-style: italic;
  font-weight: 200;
  opacity: .8;
  margin-bottom: .5rem;
}



.zitat_toggle {
  display: inline;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  font-size: .8em;
  opacity: .6;
  color: #000;
}

.zitat_remaining[hidden],
.zitat_ellipsis[hidden] {
  display: none;
}

.main-content .zitat_unten {
  display: flex;
  justify-content: space-between;
}

.main-content .zitat_img img {
  height: 5rem;
  width: auto;
}

.main-content .zitat_name {
  
}

.main-content .zitat_institution {
  font-weight: 600;
}

.main-content .zitate .zitat p {
  margin-top: 0;
}

/* ==================================================
   PERSONLIST BLOCK
================================================== */

.main-content .personlist {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 2rem 0 3rem 0;
}

.main-content .personlist .person {
  padding: .5vw 3vw .8vw 0;
  display: flex;
  flex-direction: column;
  border-top: solid 1px var(--color-green);
  font-size: 1.2rem;
  line-height: 1.3em;
}

.main-content .personlist .person:last-child:nth-child(3n + 1) {
  grid-column-end: 4;
  grid-column-start: 1;
}

.main-content .personlist .person:last-child:nth-child(3n + 2) {
  grid-column-end: 4;
  grid-column-start: 2;
}

.main-content .personlist .person div:first-child {  
  font-size: .7em;
  text-transform: uppercase;
  letter-spacing: .1em;
}



/* ==================================================
   YOUTUBE BLOCK
================================================== */

.youtube {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
  margin: 2rem 0 3rem 0;
}

.youtube__poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: #ff0033;
  background: #111;
}

.youtube__image,
.youtube__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.youtube__image {
  display: block;
  object-fit: cover;
}

.youtube__placeholder {
  background: #222;
}

.youtube__play {
  position: relative;
  z-index: 1;
  width: 68px;
  line-height: 0;
  transition: transform 180ms ease;
}

.youtube__play svg {
  display: block;
  width: 100%;
  height: auto;
}

.youtube__poster:hover .youtube__play {
  transform: scale(1.12);
}

.youtube__poster:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: -5px;
}

.youtube iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .youtube__play {
    transition: none;
  }
}


/* ==================================================
   TYPOGRAPHY
================================================== */

.main-content h1,
.main-content h2,
.main-content h3 {

}

.main-content h1 {

}

.main-content h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-red);
  margin: 2rem 0 0 0;
  line-height: .8em;
  scroll-margin-top: 21vw;
}

.main-content h3 {

}

.main-content p {

}



/* ==================================================
   FOOTER
================================================== */

.site-footer {
  position: relative;
  margin: 3vw 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-red);
}


/* Footer Layout */

.site-footer .cmq_bb {
  width: 90%;
}


/* Footer Navigation */

.site-footer .footer_insta {
  height: 2rem;
  margin-top: -2rem;
  margin-bottom: .5rem;
  color: var(--color-green);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .25rem;
}

.site-footer .footer_insta img {
  height: 2rem;
}