*{
	margin:0;
	padding:0;
}


/* webfont */



@font-face {
    font-family:'Figtree';
    src: url('/fnts/Figtree Bold.eot');
	src: url('/fnts/Figtree Bold.eot?#iefix') format('embedded-opentype'),
		url('/fnts/Figtree Bold.woff2') format('woff2'),
		url('/fnts/Figtree Bold.woff') format('woff'),
		url('/fnts/Figtree Bold.svg#Figtree Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

@font-face {
    font-family:'Figtree';
    src: url('/fnts/Figtree Bold Italic.eot');
	src: url('/newwebsite/fnts/Figtree Bold Italic.eot?#iefix') format('embedded-opentype'),
		url('/fnts/Figtree Bold Italic.woff2') format('woff2'),
		url('/fnts/Figtree Bold Italic.woff') format('woff'),
		url('/fnts/Figtree Bold Italic.svg#Figtree Bold Italic') format('svg');
    font-weight: 700;
    font-style: italic;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

@font-face {
    font-family:'Figtree';
    src: url('/fnts/Figtree Italic.eot');
	src: url('/fnts/Figtree Italic.eot?#iefix') format('embedded-opentype'),
		url('/fnts/Figtree Italic.woff2') format('woff2'),
		url('/fnts/Figtree Italic.woff') format('woff'),
		url('/fnts/Figtree Italic.svg#Figtree Italic') format('svg');
    font-weight: 400;
    font-style: italic;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

@font-face {
    font-family:'Figtree SemiBold';
    src: url('/fnts/Figtree SemiBold.eot');
	src: url('/fnts/Figtree SemiBold.eot?#iefix') format('embedded-opentype'),
		url('/fnts/Figtree SemiBold.woff2') format('woff2'),
		url('/fnts/Figtree SemiBold.woff') format('woff'),
		url('/newwebsite/fnts/Figtree SemiBold.svg#Figtree SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}



@font-face {
    font-family:'Figtree Medium';
    src: url('/fnts/Figtree Medium.eot');
	src: url('/fnts/Figtree Medium.eot?#iefix') format('embedded-opentype'),
		url('/fnts/Figtree Medium.woff2') format('woff2'),
		url('/fnts/Figtree Medium.woff') format('woff'),
		url('/fnts/Figtree Medium.svg#Figtree Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

@font-face {
    font-family:'Figtree Medium';
    src: url('/fnts/Figtree Medium Italic.eot');
	src: url('/fnts/Figtree Medium Italic.eot?#iefix') format('embedded-opentype'),
		url('/fnts/Figtree Medium Italic.woff2') format('woff2'),
		url('/fnts/Figtree Medium Italic.woff') format('woff'),
		url('/fnts/Figtree Medium Italic.svg#Figtree Medium Italic') format('svg');
    font-weight: 500;
    font-style: italic;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}



@font-face {
    font-family:'Figtree';
    src: url('/fnts/Figtree Regular.eot');
	src: url('/fnts/Figtree Regular.eot?#iefix') format('embedded-opentype'),
		url('/fnts/Figtree Regular.woff2') format('woff2'),
		url('/fnts/Figtree Regular.woff') format('woff'),
		url('/fnts/Figtree Regular.svg#Figtree Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}


@font-face {
    font-family: 'rakkasregular';
    src: url('/fnts/rakkas-regular-webfont.woff2') format('woff2'),
         url('rakkas-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'spectralitalic';
    src: url('/fnts/spectral-italic-webfont.woff2') format('woff2'),
         url('spectral-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}






/* - */


.all{
	width: 100%;
	max-width: 1920px;
	margin: auto;
}

#mainwrapper {
	width:93%;
	margin: auto;
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 20px; /* Space between columns */
}



.grid-left {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    position: relative;
}

.grid-left-blog {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.grid-rightstartonly {
    height: 100vh;
}

.grid-rightcontent {
    height: auto;
}


.grid-right {

}


.logonamewrap {
    display: flex;
    align-items: center;
    gap: 20px; /* space between logo and name */
    margin-bottom: 20px;
}

.logonamewrapnav {
    display: flex;
    align-items: center;
    gap: 20px; /* space between logo and name */
    padding: 20px 0 20px 0;
}

#logo {
    background: url("/i/fh_blue.svg") no-repeat center;
    background-size: contain;
    height: 50px;
    width: 50px;   
    z-index: 5;
}

.logohomelink {
    width: 100%;
    display: block;
    min-height: 100%;
}

#topmyname {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    color: #0B2839;
    letter-spacing: 1.3px;
    line-height: 1.3rem;
    padding: 0;
    position: static; /* ← important to reset this */
    z-index: 5;
}

.spacerblock {
    height: 370px;
    display: block;
}

.mobilstartsimg img {
    width: 100%;
    height: auto;
    padding: 10px 0 80px 0;
    display: none;
}


.startsimg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container while maintaining aspect ratio */
    display: block;
}

#lensonlifelogo .logo-link {
    display: block;
    width: 160px;
    height: 100px;
    background: url("/i/lensonlife_logo-blue.svg") no-repeat center;
    background-size: contain;
}

#lensonlifelogonav .logo-link {
    display: block;
    width: 160px;
    height: 55px;
    background: url("/i/lensonlife_logo-blue.svg") no-repeat center;
    background-size: contain;
    margin-top: 0;
    margin-bottom: 20px;
}

.mainmenu {
    padding:  0 0 0 78px;
}


.mainmenu a,.mainmenu a:hover,.mainmenu a:active,.mainmenu a:visited {
	text-decoration: none;
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    color: #0B2839;
    letter-spacing: 1.0px;
    display: block;
}
/*
.nav-spacer {
    height: 25px;  Adjust as needed 
}*/

#imp a,#imp a:hover,#imp a:active,#imp a:visited {
	text-decoration: none;
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.0rem;
    color: #0B2839;
    letter-spacing: 1.0px;
    display: block;
    padding: 50px 0 0 78px;
}







/* blog overview to select */

.overviewslider-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.overviewcontentslider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.blgsctn-slide {
    min-width: 100%;
    box-sizing: border-box;
    position: relative;
}

.contentgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: start;
}

.contentgridgal {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: start;
}

.contentgrd-left {
    display: flex;
    flex-direction: column;
    position: relative;
}

.contentgrd-right {
    display: flex;
    flex-direction: column;

}

.contentimg img {
    width: 100%;
    height: 100vh;
    display: block;
    object-fit: cover;
    object-position: left;
}

.contentimg-mobil img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: left;
    display: none;
}

.contentheadline {
    padding: 0 0 0 0;
    font-size: 3.8rem;
    color: #1B7792;
    font-family: "rakkasregular";
    font-weight: 400;
    font-style: normal;
    line-height: 3.5rem;
}

.contentheadline a, .contentheadline a:hover, .contentheadline a:active, .contentheadline a:visited {
    text-decoration: none;
    font-size: 3.8rem;
    color: #1B7792;
    font-family: "rakkasregular";
    font-weight: 400;
    font-style: normal;
    line-height: 3.5rem;
    overflow-wrap: break-word;
}




.contentstartintro {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.0rem;
    color: #0B2839;
    width: 90%;
    padding: 20px 0 20px 0;
}


.contentintro {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.0rem;
    color: #0B2839;
    width: 90%;
    padding: 10px 0 0 0;
}

#goarrow-bluecircle {
    background: url("/i/circle-arrow.svg") no-repeat center;
    background-size: contain;
    height: 70px;
    width: 70px;
    display: block;
    margin-top: 30px;
}

#bloggoarrow-bluecircle {
    background: url("/i/circle-arrow-120px.svg") no-repeat center;
    background-size: contain;
    height: 50px;
    width: 50px;
    display: block;
}


#backarrow-darkcircle {
    background: url("/i/circle-arrow-back.svg") no-repeat center;
    background-size: contain;
    height: 40px;
    width: 40px;
    display: block;
    margin-top: 30px;
}

#backarrow-darkcircle-nomobile {
    background: url("/i/circle-arrow-back.svg") no-repeat center;
    background-size: contain;
    height: 40px;
    width: 40px;
    display: block;
    margin-top: 10px;
    margin-bottom: 20px;
}





.dots {
    position: absolute;
    bottom: 20px; /* You can adjust this value to center the dots */
    left: 50%;
    transform: translateX(-50%); /* Centers the dots horizontally */
    z-index: 10; /* Make sure dots appear above the images */
}

/* Individual dot styles */
.dots .dot {
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    cursor: pointer;
}

.dot {
  width: 18px;
  height: 18px;
  background: url("/i/circle-navi-empty.svg") no-repeat center;
  background-size: contain;
  cursor: pointer;
}

.dot.active {
  background: url("/i/circle-navi-full.svg") no-repeat center;
  background-size: contain;
}



/* Make the slides invisible initially */
.blgsctn-slide {
    display: none;
}

/* Make the active slide visible */
.blgsctn-slide.active {
    display: block;
}




/* blog */

.nrmlheadline{
    font-size: 6.7rem;
    color: #1B7792;
    font-family: "rakkasregular";
    font-weight: 400;
    font-style: normal;
    line-height: 6.5rem; 
    padding: 10px 0 100px 0;
}

.blogbild{
}

.image img{
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.datum {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
    color: #0B2839;
    padding: 0 0 10px 0;
}


.headline {
    font-size: 3rem;
    color: #1B7792;
    font-family: "rakkasregular";
    font-weight: 400;
    font-style: normal;
    line-height: 3.2rem;
}

.text {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.0rem;
    color: #0B2839;
    width: 70%;
    padding: 3px 0 30px 0;
}


.upperarr {
  position: fixed;
  bottom: 30px;
  right: 22px;
  width: 50px;
  height: 50px;
  background: url('/i/up-arrow.svg') no-repeat center center;
  background-size: contain;
  cursor: pointer;
  z-index: 999;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.upperarr.visible {
  display: block;
  opacity: 1;
}


/* section entry default */


.arrowlist {
    list-style: none;
    padding: 2px 0 30px 0;
    width: 70%;
}

.arrowlist li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 14px;
    font-family: 'Figtree', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #0B2839;
}

.arrowlist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    background-image: url('/i/arrow-right.svg');
    background-size: contain;
    background-repeat: no-repeat;
}


.cursivtext {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.0rem;
    font-style: italic;
    color: #0B2839;
    width: 70%;
    padding: 12px 0 50px 0;
}


.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding:  0 0 20px 0;
}

.photo-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.photo-grid img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.mbphoto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding:20px 0 20px 0;
    display: none;
}

.mbphoto-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.mbphoto-grid img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}


.graphicphoto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding:  0 0 20px 0;
}

.graphicphoto-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.graphicphoto-grid img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}




/* photography */

.contentleftimg img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}
    
.photolinksections {
    padding: 25px 0 0 0;
}

.photolinksections a, .photolinksections a:hover, .photolinksections a:active, .photolinksections a:visited {
    text-decoration: none;
    font-family: 'Figtree', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.0rem;
    color: #0B2839;
    display: block;
    padding: 4px 0 3px 0;
}

.link-with-icon {
    display: inline-flex;
    align-items: center;
}

.link-with-icon img {
    width: 38px;
    height: auto;
    margin-left: 10px;
}

.fotouebersicht img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 60px;
}



/* Styling for the menu button */
#menuaufzu {
    cursor: pointer;
    position: absolute;
    right: 40px;
    top: 40px;
    display: block;
}

/* Main sidenav styling */
.sidenav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Fill the grid-left width exactly */
    height: 100vh;
    background-color: #fff;
    overflow-x: hidden;
    z-index: 3;
    transform: translateX(-200%);
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align: left;
    line-height: 1.5rem;
    top: 99px;
}

/* Styling for sidenav links */
.sidenav a {
    text-decoration: none;
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.0rem;
    color: #0B2839;
    letter-spacing: 0.1rem;
    display: block;
    transition: 0.3s;
}

/* When open, change the left position to 0 to show the sidenav */
.sidenav.open {
    transform: translateX(0%);
}

/* Close button styling */
.closebtn {
    position: absolute;
    top: 34px;
    left: 458px; /* Adjust position based on sidenav width */
    display: block;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

/* Close icon image styling */
.closeicon {
    position: absolute;
    top: 35px;
    right: 42px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    z-index: 4;
}


.insertnav {
    text-decoration: none;
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: 1.0rem;
    color: #0B2839;
    letter-spacing: 1.0px;
    display: block;
    padding:  5px 0 5px 20px;
}


.navspacerblock{
    height: 20px;
    display: block;

}


/* Navi-Button */
.burger {
    position: absolute;
    top: 40px;
    right: 5px;
    width: 39px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 5;
}

.burger span {
    display: block;
    height: 4px;
    background: #FFF;
    border-radius: 18px;
    transition: all 0.4s ease;
    border: 2px solid #0B2839;
}

/* Animate into X when active */
.burger.active span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}
.burger.active span:nth-child(2) {
    transform: rotate(-45deg) translate(4px, -4px);
}






/* about */


.picabout img{
    width: 100%;
    height: auto;
    margin-bottom: 20px;    
}

#describe {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.0rem;
    color: #0B2839;
    width: 70%;
    padding: 12px 0 50px 0; 
    
}


#topicstoryimg {
	width: 100%;
	height: auto;
	margin-bottom: 15px;
    align-items: center;
    overflow: hidden;
    display: flex;
}

#topicstoryimg img {
    object-fit: cover;
    display: block;
    width: 100%;
}

#topichead {
    text-decoration: none;
    font-size: 2rem;
    color: #1B7792;
    font-family: "rakkasregular";
    font-weight: 400;
    font-style: normal;
    overflow-wrap: break-word;
    line-height: 1.8rem;
}


#topicheadsmall {
    text-decoration: none;
    font-size: 2rem;
    color: #1B7792;
    font-family: "rakkasregular";
    font-weight: 400;
    font-style: normal;
    overflow-wrap: break-word;
    line-height: 2rem;
    padding: 0 10px 22px 0;
}

.topicintro {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.0rem;
    color: #0B2839;
    width: 100%;
    padding: 0 0 0 0;
}


#goarrow-bluecircle-kleiner {
    background: url("/i/circle-arrow.svg") no-repeat center;
    background-size: contain;
    height: 50px;
    width: 50px;
    display: block;
    margin-top: 18px;
    margin-bottom: 50px;
}


.topicsmallblock {
    display: flex;
  align-items: stretch; /* Makes image + text the same height */
  gap: 1.5rem;
  margin-bottom: 15px;
  background-color: #467E8E0F;
}

#topicsmallstoryimg {
    flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 3 / 2; /* optional shape control */
  overflow: hidden;
  max-width: 300px; /* optional */
}

#topicsmallstoryimg img {
   width: 100%;
  height: 100%;
  object-fit: cover; /* fills container and crops if needed */
  display: block;
}

#topicheadentry {
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    font-size: 1.0rem;
    color: #0B2839;
    padding: 20px 0 5px 0;
}

.topicsmalltext {
    flex: 1 1 50%;
}

#goarrow-bluecircle-kleiner-entry {
    background: url("/i/circle-arrow.svg") no-repeat center;
    background-size: contain;
    height: 40px;
    width: 40px;
    display: block;
    margin-top: 18px;
    margin-bottom: 50px;
}



/* graphicdesign */


#visualspacer{
    padding: 15px 0 0 0; 
    margin-top: 100px;
}

.portfoliopicdesign img {
    width: 100%;
    height: 100%;
    display: block;
    margin-bottom: 20px;
}



.picdesign img{
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    display: block;
}

#workreference  {
	width: 100%;
	height: auto;
    align-items: center;
    overflow: hidden;
}

#workreference img {
    object-fit: cover;
    display: block;
    width: 100%;
    padding-bottom: 50px;
}

#workhead {
    text-decoration: none;
    font-size: 2rem;
    color: #1B7792;
    font-family: "rakkasregular";
    font-weight: 400;
    font-style: normal;
    overflow-wrap: break-word;
    line-height: 1.8rem;
}

.workintro {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.0rem;
    color: #0B2839;
    width: 97%;
    margin-bottom: 50px;
}

#wrksubhead{
    text-decoration: none;
    font-size: 1.0rem;
    color: #413c3c;
    font-family: 'Figtree', sans-serif;
    font-weight: 400;
    font-style: normal;
    overflow-wrap: break-word;
    line-height: 1.8rem;  
    padding: 4px 0 13px 0; 
}

#smallwrksubhead{
    text-decoration: none;
    font-size: 1.0rem;
    color: #413c3c;
    font-family: 'Figtree', sans-serif;
    font-weight: 400;
    font-style: normal;
    overflow-wrap: break-word;
    line-height: 1.8rem;  
    padding: 15px 0 0 0; 
}


.smallworkintro {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.0rem;
    color: #0B2839;
    width: 97%;
}

.whatido-list {
    font-family: 'Figtree', sans-serif;
    font-size: 1rem;
    color: #0B2839;
    padding-left: 0;
    list-style-type: none;
    line-height: 1.8rem;
}

.whatido-list li {
    margin-bottom: 20px;
}


#designdescribe {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.0rem;
    color: #0B2839;
    width: 100%;
    padding: 12px 0 50px 0; 
    
}

.highlight {
    font-weight: 600;
    color: #1B7792; /* Or any color matching your theme */
}



/* topicsection */


.topicstorylink {
    text-decoration: none;
    color: inherit;
    display: block;
}






.impressum{
    padding: 130px 0 80px 0;  
}



/* stories */

.subheadstories {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
    color: #0B2839;
}

.subheadwrap {
    display: flex;
    align-items: center;
    gap: 12px; /* space between circle and text */
    margin: 40px 0 20px 0;
}

.circle-number {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #fff;
    color: #1B7792;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Figtree', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    border: 2px solid #1B7792;
}




.blogview {
    width: 70%;
}

.blogviewcontent{
    padding: 0 0 0 80px;
}

.bloghead {

}


.divider {
    height: 2px;
    background: #A0EBFA;
    width: 7%;
    margin: 0px 0 70px 0;
}

.arrow-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 80px 0;
}

#goarrow-bluecircle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-block;
}

.arrow-text {
    font-family: 'Figtree', sans-serif;
    font-size: 1rem;
    color: #0B2839;
}

.blogheadstroke {
    border-radius: 30px;
    border: 2px solid #8F1E1C;
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
    color: #0B2839;
    padding: 6px 75px; 
    background-color: #fff;
    display: inline-flex;
}

.topicheadstroke {
    border-radius: 30px;
    border: 2px solid #ffd700;
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
    color: #0B2839;
    padding: 6px 75px; 
    background-color: #fff;
    display: inline-flex;
}


.topicaddimage img{
    width: 70%;
    height: auto;
    margin-bottom: 20px;
}


.blogviewdate{
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.4rem; 
    padding: 20px 0 0 0;
}

.blogviewhead{
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
    font-style: italic;
    padding: 30px 0 0 0;
}

.textarchiveintro {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.0rem;
    color: #0B2839;
    padding: 0 20px 40px 0;
}


.textarchive {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.0rem;
    font-style: italic;
    color: #0B2839;
    padding: 2px 0 50px 0; 
}

.blogviewphoto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.blogviewphoto-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.blogviewphoto-grid img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}


.placesheadline{
    font-size: 3rem;
    color: #1B7792;
    font-family: "rakkasregular";
    font-weight: 400;
    font-style: normal;
    line-height: 3.2rem;
    padding: 80px 0 0 0;
}






/* responsiv */

@media (max-width:1600px) {
    
    .spacerblock {
        height: 200px;
        display: block;
    }
}



@media (max-width:1400px) {
    
    .gridheadline a, .gridheadline a:hover, .gridheadline a:active, .gridheadline a:visited {
        font-size: 6.0rem;
        line-height: 5.5rem;
        line-height: 5.5rem;
    }
    
        .topicsmallblock {
        flex-direction: column; 
        align-items: center;
        gap: 0.0rem;
    }

      #topicsmallstoryimg {
        width: 100%;           
        height: auto;           
        max-width: 100%;
      }

      #topicsmallstoryimg img {
        width: 100%;
        height: auto;
        object-fit: cover;     
      }

      .topicsmalltext {
        width: 100%;
        padding: 0 1rem;        
        text-align: left;       
      }
    
    #topicheadentry {
      font-family: 'Figtree', sans-serif;
      font-weight: 600;
      font-size: 1.0rem;
      color: #0B2839;
      padding: 20px 0 3px 25px;
    }
    
    
    #topicheadsmall {
        text-decoration: none;
        font-size: 2rem;
        color: #1B7792;
        font-family: "rakkasregular";
        font-weight: 400;
        font-style: normal;
        overflow-wrap: break-word;
        padding: 0 0 22px 25px;
    }
    
    .impressum{
        padding: 5px 0 80px 0;  
    }
    
    
    #backarrow-darkcircle-nomobile {
    display: none;
}
    
}




@media (max-width:1200px) {
    
    .grid-left-blog {
        display: flex;
        flex-direction: column;
        padding-top: 20px;
        top: 0;
        height: auto;
    }

    
        .contentheadline {
        padding: 20px 0 0 0;
    }

    .contentheadline a, .contentheadline a:hover, .contentheadline a:active, .contentheadline a:visited {
         padding: 30px 0 0 0;

    }
    
    
      .overviewcontentslider {
          display: block !important;
          transform: none !important;
          overflow: visible !important;
      }

      .blgsctn-slide {
          display: block !important;
          width: 100% !important;
          transform: none !important;
          opacity: 1 !important;
          position: static !important;
      }

      .dots,
      .slider-controls,
      .animation-wrapper {
          display: none !important;
      }
    
    #mainwrapper {
        grid-template-columns: 1fr;
        width:90%;
        display: grid;

    }
    
    .contentgrid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
        
    .spacerblock {
        height: 370px;
        display: none;
    }

    .mobilstartsimg img {
        width: 100%;
        height: auto;
        padding: 12px 0 10px 0;
        display: block;
    }

    
    #workreference img {
      padding-bottom: 25px;
    }

    .startsimg img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures the image fills the container while maintaining aspect ratio */
        display: none;
    }
    
    .mbphoto-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        padding:0 0 0 0;
        display: block;
    }
    
    .mbphoto-grid img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
        padding:10px 0 10px 0;
    }
    
    .graphicphoto-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        padding:20px 0 20px 0;
        display: none;
    }

    .graphicphoto-grid img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: none;
    }
    
    .blogviewphoto-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        padding: 0px 0 40px 0;       
    }
    
        
    .portfoliopicdesign img {
        display: none;
    }
    
    
    .grid-rightstartonly{
        display: none;
    }
    
    #imp{
        padding: 0 0 20px 0;
    }

    	#mobmenu {
		display: block;
	}
		

    
    .gridheadline a, .gridheadline a:hover, .gridheadline a:active, .gridheadline a:visited {
        font-size: 4.5rem;
        line-height: 4.5rem;
    }
    
    .gridintro {
          padding: 10px 0 0 0;
        }
    
    
    .contentimg img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
        object-position: left;
        display: none;
    }

    .contentimg-mobil img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: left;
        display: block;
    }
    
    
    
    #goarrow-bluecircle {
        background: url(/i/circle-arrow.svg) no-repeat center;
        background-size: contain;
        height: 70px;
        width: 70px;
        display: block;
        margin: 30px 0 75px 0;
    }
    
    #backarrow-darkcircle {
        background: url("/i/circle-arrow-back.svg") no-repeat center;
        background-size: contain;
        height: 40px;
        width: 40px;
        display: block;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    

    

    .contentstartintro {
        font-family: 'Figtree', sans-serif;
        font-weight: 500;
        font-size: 1.0rem;
        color: #0B2839;
        width: 90%;
        padding: 20px 0 5px 0;
    }

    #visualspacer {
      margin-top: 70px;
    }

    
}    


@media (max-width:690px) {
    
    .gridheadline a, .gridheadline a:hover, .gridheadline a:active, .gridheadline a:visited {
        font-size: 2.3rem;
        line-height: 2.0rem;
    }
    
    .grid-right {
        padding-top: 0px;
    }
    
    .closebtn {
        position: absolute;
        top: 36px;
        right: 26px;
        display: block;
        width: 28px;
        height: 28px;
        cursor: pointer;
    }
    
    .gridintro {
        width: 90%;
    }

    #goarrow-bluecircle {
        height: 60px;
        width: 60px;
        margin: 20px 0 50px 0;
    }
 
      .overviewcontentslider {
        display: block;
        transform: none !important; /* override slider transform */
        width: auto;
      }

      .blgsctn-slide {
        width: 100%;
      }

      .dots {
        display: none;
      }
    
    .contentintro {
        width: 100%;
    }
    
    .text {
        font-family: 'Figtree', sans-serif;
        font-weight: 500;
        font-size: 1.0rem;
        color: #0B2839;
        width: 100%;
        padding: 3px 0 70px 0;
    }    
    
    .datum {
        font-family: 'Figtree', sans-serif;
        font-weight: 500;
        font-size: 1.4rem;
        color: #0B2839;
        padding: 0 0 10px 0;
    }
    

    #describe {
        width: 100%;
    }

    
    .mobilenone{
        display: none;
    }

    
    .blogview {
        width: 100%;
    }
    
    .blogviewcontent{
        padding: 0 0 0 0;
    }
    
    .blogviewhead {
      padding: 0 0 0 0;
    }
    
    
    .blogheadstroke {
        border-radius: 30px;
        border: 2px solid #ffd700;
        font-family: 'Figtree', sans-serif;
        font-weight: 500;
        font-size: 1.4rem;
        color: #0B2839;
        padding: 0 0 10px 0;
        padding: 6px 0; 
        background-color: #fff;
        width: 100%;
        text-align: center;
        display: block;
    }


}




/* oldwebsite-galerie */




.galauswahl {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
	padding-bottom: 100px;
}

.galauswahl div {
	flex: 0 0 calc(50% - 50px);
	display: inline-block;
	/*margin: 0 50px 50px 0;*/
}

.galauswahl div:nth-child(even) {
	margin-right: 0;
}

.galauswahl div a {
	position: relative;
	display: block;
}

.galauswahl div > a > span {
  
	position: absolute; 
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	text-shadow: 2px 2px 4px #3d3d3d;
	
	font-size: 5vw;
	
	display: flex;
	justify-content: center;
	align-items: end; 
	padding-bottom: 20%;
	color: white;
}

.galauswahl div > a > span > span {
	color: white;
	  font-family: "Rakkas", serif;
  font-weight: 400;
  font-style: normal;
	border-bottom: 1px solid white;	
	position: relative;
}

.galauswahl div > a > span > span:after {
	content: " ";
	position: absolute;
	left: 0;
	width: 100%;
	bottom: -5px;
	height: 1px;
	background: #ffffff;
}

.galauswahl div a img {
	width: 100%;
	height: auto;
	display: block;
}



.fotouebersicht {
	display: flex;
	gap: 60px;
}

.fotouebersicht img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 60px;
}

@media screen and (min-width:1500px) {
	.galauswahl div a span {
		font-size: 4rem;
	}
}

@media screen and (max-width:800px) {
	.fotouebersicht {
		display: block;
	}

	.fotouebersicht > div {

	}

	.galauswahl {
		gap: 20px;
	}	

	.galauswahl div {
		flex: 0 0 calc(50% - 10px);
	}
	
	.fotouebersicht img {
		margin-bottom: 30px;
	}
}