header {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
}

.content-page {
  color: white;
  display: grid;
  grid-template-columns: [full-start] minmax(16px, 1fr) [main-start] minmax(0, 1800px) [main-end] minmax(16px, 1fr) [full-end];
}
.content-page p {
  margin: 0 0 1em 0;
}
.content-page .page-header {
  position: relative;
  grid-column: full;
  padding-top: 8em;
}
.content-page .page-header .text-wrap {
  display: flex;
  flex-flow: column;
  align-items: center;
}
@media (min-width: 50em) {
  .content-page .page-header .text-wrap {
    display: grid;
    grid-template-rows: 1fr auto;
  }
}
.content-page .page-header .text {
  max-width: clamp(200px, 100vw, 700px);
  text-align: center;
  margin-bottom: 2em;
  padding: 0 1em;
}
@media (min-width: 50em) {
  .content-page .page-header .text {
    align-self: end;
    justify-self: center;
    margin-bottom: 4em;
  }
}
.content-page .page-header .text h1 {
  font-size: clamp(2em, 5vw, 3.5em);
  font-weight: 600;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  border-bottom: solid 1px white;
}
.content-page .page-header .text .intro {
  font-size: clamp(1em, 2vw, 1.3em);
  font-weight: 300;
  line-height: 1.6em;
}
.content-page .page-header .contact-person {
  color: white;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto auto;
  align-items: center;
}
.content-page .page-header .contact-person img {
  border-radius: 100%;
  height: 80px;
  width: 80px;
  margin: 0 1em 0 0;
  grid-column: 1;
  grid-row: 1/-1;
}
.content-page .page-header .contact-person .name {
  grid-row: 1;
  grid-column: 2;
  font-weight: 600;
  font-size: 1.1em;
}
.content-page .page-header .contact-person .title {
  grid-row: 2;
  grid-column: 2;
}
.content-page .page-header .contact-person .phone {
  grid-row: 3;
  grid-column: 2;
}
.content-page .page-header .contact-person .email {
  grid-row: 4;
  grid-column: 2;
}
@media (min-width: 50em) {
  .content-page .page-header .contact-person {
    display: grid;
    grid-template-rows: repeat(2, 1fr) 30px repeat(2, 1fr);
    grid-template-columns: 1fr auto 1fr;
    margin-bottom: -60px;
  }
  .content-page .page-header .contact-person img {
    margin: 0 1em;
    grid-column: 2;
    height: 120px;
    width: 120px;
  }
  .content-page .page-header .contact-person .name {
    grid-row: -3;
    grid-column: 1;
    justify-self: end;
  }
  .content-page .page-header .contact-person .title {
    grid-row: -2;
    grid-column: 1;
    justify-self: end;
  }
  .content-page .page-header .contact-person .phone {
    grid-row: -3;
    grid-column: 3;
  }
  .content-page .page-header .contact-person .email {
    grid-row: -2;
    grid-column: 3;
  }
}
.content-page.has-image .page-header {
  padding-top: 0;
}
@media (min-width: 50em) {
  .content-page.has-image .page-header .text-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: radial-gradient(ellipse clamp(200px, 100vw, 1200px) 400px at bottom center, #043e53, rgba(4, 62, 83, 0));
  }
}
@media (min-width: 50em) {
  .content-page.has-contact .page-header {
    margin-bottom: 80px;
  }
}

.sl-overlay {
  opacity: 1;
  z-index: 40000;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(10px) saturate(0);
  backdrop-filter: blur(10px) saturate(0);
}

.sl-wrapper {
  z-index: 40001;
}
.sl-wrapper .sl-image {
  z-index: 40010;
}
.sl-wrapper .sl-navigation button {
  z-index: 40020;
  color: white;
}

.block {
  grid-column: main;
  padding: 2em 0;
}

.block.text {
  --img-max-width: 100%;
}
.block.text .body {
  max-width: 80em;
}
.block.text.has-image .body {
  max-width: none;
}
.block.text picture {
  display: flex;
  align-content: center;
  justify-content: center;
}
.block.text img {
  max-width: var(--img-max-width);
  align-self: center;
}
.block.text aside {
  background: rgba(0, 0, 0, 0.1);
  padding: 1em;
  border: solid 1px rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}
.block.text a:link, .block.text a:visited {
  color: inherit;
}
@media (min-width: 60em) {
  .block.text.has-image, .block.text.has-secondary-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2em;
  }
  .block.text.has-image h2, .block.text.has-secondary-text h2 {
    grid-column: 1/-1;
  }
  .block.text.has-image.image-left picture, .block.text.has-secondary-text.image-left picture {
    grid-column: 1;
    grid-row: 2;
  }
  .block.text.has-image.image-left .body, .block.text.has-secondary-text.image-left .body {
    grid-column: 2;
    grid-row: 2;
  }
  .block.text aside h1:first-child, .block.text aside h2:first-child, .block.text aside h3:first-child {
    margin-top: 0;
  }
  .block.text.has-secondary-text {
    grid-template-columns: 3fr 2fr;
  }
  .block.text.has-secondary-text.image-left {
    grid-template-columns: 2fr 3fr;
  }
  .block.text.has-secondary-text.image-left aside {
    grid-column: 1;
    grid-row: 2;
  }
}
.block.text table {
  border-collapse: collapse;
  -moz-column-break-inside: avoid;
  break-inside: avoid-column;
  font-size: 0.9em;
}
.block.text table tbody th {
  text-align: left;
  font-weight: 500;
}
.block.text table td, .block.text table th {
  border-top: solid 1px rgba(255, 255, 255, 0.3);
  border-bottom: solid 1px rgba(255, 255, 255, 0.3);
  padding: 0.5em;
}
.block.text table tr:nth-child(even) td, .block.text table tr:nth-child(even) th {
  background: rgba(255, 255, 255, 0.05);
}

.block.text-image {
  position: relative;
  padding: 0;
  --img-max-width: 100%;
}
.block.text-image.fullwidth {
  grid-column: full;
}
.block.text-image img {
  max-width: var(--img-max-width);
}
.block.text-image .text-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  padding: 2rem 0;
  background: radial-gradient(ellipse clamp(200px, 100vw, 1200px) 600px at bottom center, #043e53, rgba(4, 62, 83, 0));
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  font-size: clamp(1.5em, 4vw, 2.5em);
  font-weight: 300;
  text-align: center;
}
.block.text-image .text-wrap h2 {
  font-size: 1.5em;
  font-weight: 500;
}
.block.text-image .text-wrap .text {
  max-width: 30em;
  padding: 0 2em;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.block.text-image .links {
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
  justify-content: center;
}
.block.text-image .links a {
  color: inherit;
  display: block;
  text-decoration: none;
  font-size: 0.6em;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 0.25em 0.5em;
  border-radius: 10px;
  border: solid 2px rgba(255, 255, 255, 0.5);
  box-shadow: rgba(0, 0, 0, 0.3) 0 0 30px;
  transition: background-color ease-in-out 0.2s, transform ease-in-out 0.2s;
}
.block.text-image .links a:hover {
  background: #005574;
  transform: scale(1.03);
}
.block.text-image.text-above {
  display: flex;
  flex-flow: column;
}
.block.text-image.text-above .text-wrap {
  order: -1;
  position: static;
  font-size: clamp(1em, 4vw, 1.3em);
}
.block.text-image.text-above .text-wrap .text {
  max-width: 60em;
}
.block.text-image.text-above picture {
  text-align: center;
}

.block.gallery ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1em;
}

.block.linkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 25vw, 450px), 1fr));
  grid-gap: clamp(1em, 3vw, 2em);
}
@media (min-width: 50em) {
  .block.linkboxes.mod-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 90em) {
  .block.linkboxes.mod-3 {
    grid-template-columns: repeat(6, 1fr);
  }
}
.block.linkboxes a.box {
  color: inherit;
  text-decoration: none;
  display: block;
  background: #005574;
  padding: 1em;
  transition: background-color ease-in-out 0.2s;
  font-size: clamp(.9em, 3vw, 1em);
}
.block.linkboxes a.box:hover {
  background: #007aa7;
}
.block.linkboxes a.box h2 {
  margin: 0;
  font-size: 1.2em;
}
.block.linkboxes a.box.has-image {
  position: relative;
  padding: 0;
}
.block.linkboxes a.box.has-image .text {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1em;
  background: rgba(0, 85, 116, 0.6);
  transition: background-color ease-in-out 0.2s;
}
.block.linkboxes a.box.has-image:hover .text {
  background: rgba(0, 85, 116, 0.8);
}
.block.linkboxes.text-below a.box.has-image .text {
  position: static;
  background: none;
}

.block.partners .partner-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: center;
}
.block.partners .partner-gallery li {
  margin: 1em;
}
@media (min-width: 60em) {
  .block.partners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-gap: 2em;
  }
  .block.partners h2 {
    text-align: center;
    grid-row: 1;
    grid-column: 1/-1;
  }
  .block.partners .partner-gallery {
    grid-row: 2;
    grid-column: 1/-1;
  }
  .block.partners .body ~ h2 {
    grid-column: 2;
  }
  .block.partners .partner-gallery ~ .body {
    grid-column: 1;
    grid-row: 1/-1;
  }
  .block.partners .body ~ .partner-gallery {
    grid-column: 2;
    grid-row: 2;
  }
}

.block.latest-news {
  grid-column: full;
  display: grid;
  grid-template-columns: [full-start] minmax(16px, 1fr) [main-start] minmax(0, 1800px) [main-end] minmax(16px, 1fr) [full-end];
  background: #005574;
}
.block.latest-news .inner {
  grid-column: main;
  display: grid;
  grid-gap: 2em;
}
.block.latest-news h2 {
  grid-row: 1;
  grid-column: 1/-1;
}
.block.latest-news a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  color: inherit;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.2);
  padding: 1em;
  transition: background-color ease-in-out 0.2s;
}
.block.latest-news a:hover {
  background: rgba(0, 0, 0, 0.25);
}
.block.latest-news a time {
  grid-column: 1;
  grid-row: 1/3;
}
.block.latest-news a h3 {
  margin: 0 0 0.5em 0;
  font-size: clamp(1.1em, 2vw, 1.3em);
}
.block.latest-news a .text {
  font-weight: 300;
  font-size: 0.9em;
}
.block.latest-news .latest-story {
  position: relative;
  font-size: clamp(1.2em, 3vw, 1.5em);
}
.block.latest-news .latest-story > * {
  z-index: 3;
}
.block.latest-news .latest-story picture {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
}
.block.latest-news .latest-story picture img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.block.latest-news .latest-story::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0, 85, 116, 0.7);
  transition: background-color ease-in-out 0.2s;
}
.block.latest-news .latest-story:hover::before {
  background: rgba(0, 85, 116, 0.8);
}
.block.latest-news .other-news {
  list-style: none;
  margin: 0;
  padding: 0;
}
.block.latest-news .other-news li {
  margin-bottom: 2em;
}
.block.latest-news .other-news li:last-child {
  margin-bottom: 0;
}
.block.latest-news .more {
  text-transform: uppercase;
  font-weight: 600;
}
@media (min-width: 60em) {
  .block.latest-news .inner {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto auto auto;
  }
  .block.latest-news .latest-story {
    grid-column: 1;
    grid-row: 2/-1;
  }
  .block.latest-news .more {
    grid-row: -2;
    grid-column: -2;
  }
}
.block.latest-news time {
  display: flex;
  flex-flow: column;
  align-items: center;
  order: -1;
  margin-right: 2em;
}
.block.latest-news time .day {
  font-weight: bold;
  font-size: 2em;
  line-height: 1em;
}
.block.latest-news time .month {
  font-size: 1.2em;
  text-transform: uppercase;
}

.block.webcam .images {
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
  overflow: hidden;
}
.block.webcam .images img {
  display: block;
  width: 25%;
  min-width: clamp(300px, 90vw, 400px);
  flex: 1 1 25%;
}