:root {
  --color-Highlight01: hsla(240, 100%, 50%, 1);
  --color-Highlight02: hsla(240, 100%, 50%, 0.5);
  --color-Highlight03: rgba(214, 155, 212, .7);
  --color-Highlight04: rgba(214, 155, 212, 1);
  --box-shadow01: rgba(214, 155, 212, .5);
  --box-shadow02: rgba(186, 226, 208, .6);
  --box-shadow03: rgba(0, 0, 182, 0.5);
  --color-Main01: rgb(0, 0, 182);
  --color-Main02: rgb(214, 155, 212);
  --color-Main03: rgb(186, 226, 208);

  --font-4: 0.146rem;
  --font-3: 0.236rem;
  --font-2: 0.382rem;
  --font-1: 0.618rem;
  --font00: 1rem;
  /* --font01: 1.618rem;
  --font02: 2.618rem;
  --font03: 4.236rem;
  --font04: 6.854rem;
  --font05: 11.089rem; */
  --font01: 1.5rem;
  --font02: 2.25rem;
  --font03: 3.375rem;
  --font04: 5.063rem;
  --font05: 7.594rem;
  --font06: 11.391rem;

  --icon-padding: var(--font00);
}

*::selection {
  color: var(--color-Highlight04);
  text-shadow: var(--color-Highlight01) 0px 0px .3em;
}

@font-face {
  font-family: "text";
  src: url("/assets/fonts/Millionaire-Roman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "title";
  src: url("/assets/fonts/FHAlpha-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "menu";
  src: url("/assets/fonts/FHAlpha-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ======== body/main ================================ */

body {
  font-family: "text", serif;
  font-size: var(--font01);
  line-height: 1.42;
  color: rgb(0, 0, 182);

  min-height: 100vh;
  margin: 0 auto;

  overflow-anchor: none;

  max-width: 100%;
  overflow-x: hidden;

  position: relative;

  background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
  background-image: radial-gradient(49% 81% at 45% 47%, #FFFC0345 0%, #073AFF00 100%),radial-gradient(113% 91% at 17% -2%, #4949B64F 1%, #FF000000 99%),radial-gradient(142% 91% at 83% 7%, #F200FF29 1%, #FF000000 99%),radial-gradient(142% 91% at -6% 74%, #00FF2938 1%, #FF000000 99%),radial-gradient(142% 91% at 111% 84%, #00B9FF3D 0%, #0050FF30 100%),radial-gradient(75% 75% at 50% 50%, #00FFFF42 0%, #073AFF1C 100%),radial-gradient(75% 75% at 50% 50%, #FFFFFFFF 0%, #FFFFFFFF 100%);
}

body,
header { max-width: 100%; }

main {
  z-index: 10;
  width: 100%;
  max-width: 100rem;
  margin: 0 auto;
  min-height: 91vh;
  padding: var(--font02) var(--font03) 10rem;
}

h1, h2, h3, h4, h5 {font-family: "title"; font-weight: 400;}

h1 {font-size: var(--font05);}
h2, main.Projekte section.projects a {font-size: var(--font04);}
h3 {
  font-size: var(--font02);
  position: relative;
  /* font-style: italic; */
  padding: var(--font-1) 1rem 0;
  margin: var(--font01) 0 var(--font01);
}
h4 {font-size: var(--font00); padding-left: 1rem;}
h5 {font-size: var(--font00);}

p { padding-bottom: var(--font01); }

p:first-of-type,
main.project section.gallery {
  padding-top: var(--font01);
}


/* ======== a ... Links ================================ */


a {
  border-radius: var(--font02);
  /* padding: var(--font-1) var(--font00); */
  padding: .2em .2em;
  /* background: var(--box-shadow01); */
  box-shadow: 0 .3em var(--box-shadow01);
  transition: .2s;
}
a:hover {
  background: var(--color-Highlight03);
  transition: .2s;
}

h1 a, h2 a, h3 a, h4 a, h5 a { margin-left: -1rem; }

a.lightboxlink {
  padding: 0;
  background: 0;
  margin: 0 auto;
  height: inherit;
  width: 100vw;
  mix-blend-mode: multiply;
  box-shadow: 0 0 0;
}
a.lightboxlink:hover {
  padding: 0;
  background: 0;
  mix-blend-mode: normal;
}
a.lightboxlink img {
  filter: brightness(80%);
  transition: .2s;
}
a.lightboxlink img:hover {
  mix-blend-mode: normal;
  filter: brightness(100%);
  transition: .2s;
}
a, section.links a { text-shadow: 0 0 1em var(--box-shadow03); }
a::before, a::after { text-shadow: 0 0 .3em var(--box-shadow01); }

main.project section.links a::before,
main.about section.links a::before {
  content: ' 🪐 ';
  padding-right: .5em;
}
main.project section.links a::after,
main.about section.links a::after {
  content: ' 🪐 ';
  padding-left: .5em;
}

main.about li.mail a::before {
  content: ' 📨 ';
  padding-right: .5em;
}
main.about li.mail a::after {
  content: ' 📨 ';
  padding-left: .5em;
}

main.about section.links a.pdf::before {
  content: ' 📄 ';
  padding-right: .5em;
}
main.about section.links a.pdf::after {
  content: ' 📄 ';
  padding-left: .5em;
}

/* ======== MENU  Nav + Header + Footer ================ */
header {
  position: fixed;
  /* top: 0; */
  bottom: 0;
  padding-bottom: .1em;
  width: 100%;
  height: fit-content;

  font-size: var(--font01);
  line-height: 1.2;

  z-index: 20;

  font-family: "menu";
  font-weight: 400;
  color: var(--color-Main01);

  /* pointer-events: none; */
}
/* .header-menu a, .footer-menu a { pointer-events: auto;} */
.header-menu {
  width: inherit;
}
.header-menu ul {
  display: inline-flex;
  justify-content: space-evenly;
  width: inherit;
  padding: 0 4em .5em;
}
.header-menu li {
  /* border-radius: var(--font02); */
  /* pointer-events: none; */
  display: inline-flex;
  justify-content: space-evenly;
  flex: 1 1 0;
  width: 5em;
  /* width: 1em; */
}
.header-menu li a {
  width: inherit;
  text-align: center;
  backdrop-filter: blur(.2rem);
  background: var(--box-shadow02);
  box-shadow: 0 0 2em var(--color-Main02);
}

.header-menu a:hover {
  background: hsla(302, 81%, 65%, 0.7);
  color: var(--box-shadow02);
}
.header-menu a.active {
  color: var(--color-Main03);
  background: hsla(302, 81%, 65%, 0.7);
}
.header-menu a.active:hover {
  color: var(--color-Main01);
}
.header-menu li:hover,
.header-menu li:has(> a.active) {
}


/* ======== HOME ================ */
main.Home,
.Error {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font03);
}

main.Home {
  align-items: center;
}
main.Home .rand-element {
  display: none;
  box-shadow: rgba(214, 155, 212, .7) 0 0 4rem;
  border-radius: var(--font04);
}
main.Home .rand-element p {
  border-radius: var(--font04);
  /* background: var(--color-Highlight03); */
  padding: var(--font03) var(--font03);

  font-size: var(--font02);
  text-align: center;
  box-shadow: var(--color-Highlight03) 0 0 10px;
}
main.Home .rand-element figure {
  line-height: 0;
  font-size: 0;
}
main.Home .rand-element img {
  max-height: 80vh;
  border-radius: var(--font04);
}

/* ======== PROJECTS ================ */
main.Projekte section.projects ul {
  width: inherit;
  line-height: inherit;
  /* line-height: 1; */
}
main.Projekte section.projects ul li {
  width: inherit;
  padding-bottom: var(--font01);
}

main.Projekte section.projects ul li a {
  font-family: "menu";
  padding: var(--font-1) 0 var(--font00) var(--font00);
  margin-left: 0;
  transition: margin-left 0.1s linear;
}
main.Projekte section.projects a:hover {
  transition: margin-left 0.1s linear;
}

main.Projekte section.projects .subt {
  padding-left: .6em;
}

main.Projekte section.projects img,
main.about .contact img {
  border-radius: 5rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  max-height: 50%;
  width: auto;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;

  opacity: 0;
  transition: opacity 0.5s;
}
main.Projekte section.projects ul li a:hover img {
  opacity: 1;
}



/* ======== PROJECT ================ */
main.project > section {
  padding-bottom: var(--font01);
}
/* main.project section.links, */

main.project section.links {
  width: 100%;
  text-align: center;
  padding: 3rem 0;
  /* padding: 2rem; */
}
main.project section.links ul li {
  padding: 1em;
}

main.project .grid {
  width: 100%;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
main.project .grid .blocks {
  padding: 1em;
}

main.project .grid .blocks,
.block-type-embed div {
  box-shadow: 0 10px var(--box-shadow01);
  border-radius: 3em;
}
.block-type-embed div {
  display: inline-flex;
  padding: 1em;
}

/* ======== Deko ================ */
main.project section.links,
main.project section.gallery {
  position: relative;
}

h3::before,
h3::after {
  content: '';
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius: var(--font02);
}

h3::before {
  transform: translateY(5rem);
  box-shadow: 0 -20px var(--box-shadow01);
}
/* main.project .links::before {
  box-shadow: 0 -20px var(--box-shadow01);
} */

h3::after {
  box-shadow: 0 20px var(--box-shadow01);
}

.block-type-embed {
  text-align: center;
}


/* ======== GALLERY ================ */

.lg-container .lg-sub-html {
  font-size: var(--font00);
  color: var(--color-Page-Front);
  text-align: left;
}
.lg-container .lg-sub-html p {
  font-size: inherit;
}
.lg-object {
  max-width: 80vw !important;
  max-height: 80vh !important;
  border-radius: var(--font00);
}
.lg-content > button {
  background-color: transparent;
}
.lg-container .lg-backdrop,
.glightbox-open .glightbox-gallery1 .goverlay {
  background-color: rgba(167, 167, 167, 0.4);
  /* opacity: 97% !important; */
  backdrop-filter: blur(4px);
}


.block-gallery {
  padding-bottom: 1rem;
}
.block-gallery .gallery-fence {
  display: flex;
  min-width: 80vw;
  gap: 0 1rem;
  height: var(--font04);
}
.block-gallery .gallery-fence div {
  position: relative;
  width: 100%;
  /* height: 100%; */
  height: inherit;
}
.block-gallery .gallery-fence div picture {
  height: inherit;
  width: inherit;
}
.gallery-fence div picture img {
  object-fit: cover;
  border-radius: 5rem;
  height: inherit;
  width: inherit;
  max-width: 100%;
}

.project .block-gallery a.lightboxlink:after {
  display: none;
}
.project .block-gallery a.lightboxlink:hover {
  margin: 0;
}

/* ======== *About ======================== */
main.about .text.short {
  /* font-size: var(--font02); */
}

main.about section.links {
  text-align: center;
  padding: 2rem 0 2rem;
}
main.about section.links ul {
  display: inline-flex;
  justify-content: center;
  flex-flow: row wrap;
  /* gap: 1rem 2%; */
  /* align-items: flex-start; */
}
main.about section.links ul li {
  padding: 1em;
}
main.about .gallery-fence > div {
  display: none; /* RANDOM */
}

main.about .block-gallery {
  display: flex;
  justify-content: center;
}
main.about .block-gallery .gallery-fence {
  height: auto;
  min-width: 100px;
  max-width: 400px;
  /* padding-bottom: 1rem; */
}

main.about a.lightboxlink {
  mix-blend-mode: normal;
  /* box-shadow: 0 0 0; */
}
a.lightboxlink:hover {
  /* padding: 0; */
  /* background: 0; */
  mix-blend-mode: normal;
}
a.lightboxlink img {
  filter: brightness(100%);
  transition: .2s;
}
a.lightboxlink img:hover {
  mix-blend-mode: normal;
  filter: brightness(105%);
  transition: .2s;
}

/* ======== *Dates/Events ======================== */
main.dates section.date {
  padding-bottom: 2rem;
}

main.dates .date-past {
  opacity: 0.5;
}

main.dates li.date-title {
  display: inline-flex;
  font-size: var(--font01);
}
main.dates li.date-title a {
  padding-left: 0;
  padding-right: 0;
}


/* ======== ICON FANCY SCHMANCY ======================== */

/*
.bg-icon {
  height: 100%;
  width: 100%;
  background: url('../icons/icon01.svg') top left/60px 50px;
  opacity: 30%;
  z-index: 2;
  position: absolute;
  top:0;
  left: 0;
  mask-image: radial-gradient(circle, rgba(0,0,0,0.03) 20%, rgba(0,0,0,0.1) 87%, rgba(0,0,0,1));
  pointer-events: none;
}
*/
  /* mask-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0)); */
  /* mask-image: radial-gradient(rgba(0,0,0,0) 60%, rgba(0,0,0,1)); */

body > footer .nice-icons * {
  position: fixed;
  z-index: 20;
  opacity: 50%;
  width: var(--font02);
  height: auto;
  pointer-events: none;

  /* margin-bottom: var(--font04); */
}

body > footer .nice-icons img:first-child {top: var(--icon-padding);left: var(--icon-padding);}
body > footer .nice-icons img:nth-child(3) {bottom: var(--icon-padding);left: var(--icon-padding);}
body > footer .nice-icons img:nth-child(4) {bottom: var(--icon-padding);right: var(--icon-padding);}
body > footer .nice-icons img:nth-child(2) {top: var(--icon-padding);right: var(--icon-padding);}


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

.footer-menu {
  text-align: right;
  top: 1vh;
  right: 0;
  position: absolute;
  padding: 0 var(--font01) .25rem;

  font-size: var(--font00);
  line-height: 1.2;

  opacity: 0.75;
  font-family: "menu";
}

.footer-menu ul li {
  display: inline;
  /* padding: 0 var(--font00) 0; */
}

.footer-menu a {
  padding: .25rem .5rem;
  transition: .2s;
}


/* ---------- MEDIA QUERIES ----------- */
@media (max-width: 880px) {
  .project .embeds ul li iframe {
    max-width: 300px;
    max-height: 300px;
  }
  h2, main.Projekte section.projects a {font-size: var(--font03);}
}
@media (max-width: 420px) {
  body {font-size: var(--font00); line-height: 1.65;}
  header {font-size: var(--font00);}
  .header-menu ul {padding: 0 .6em .5em;}
  .footer-menu {font-size: var(--font-1);}
  main {padding: var(--font02) var(--font01) var(--font02);}
  main.project > section {padding-bottom: 0;}
  h2, main.Projekte section.projects a {font-size: var(--font02);}
  h3 {font-size: var(--font01);}
  main.Projekte section.projects ul li {padding-bottom: var(--font00);}
  main.Projekte section.projects .subt {font-size: var(--font00);}
  .block-type-embed, .block-type-embed .embed { width: 90vw;}
}