/*
Theme Name: Custom FF
Author: STUDIO BENS
Description: A custom WordPress theme with 12-column CSS Grid, ACF, WPML, slick-slider, SEO-optimized, and custom typography.
Version: 1.0
*/

/* === FONTS === */
@font-face {
  font-family: 'SuisseIntlMono';
  src: url('fonts/SuisseIntlMono-Regular-WebS.eot'); /* IE9 Compat Modes */
  src: url('fonts/SuisseIntlMono-Regular-WebS.eot?#iefix') format('embedded-opentype'),
  
       url('fonts/SuisseIntlMono-Regular-WebS.ttf') format('truetype'),
	       url('fonts/SuisseIntlMono-Regular-WebS.woff2') format('woff2'),
       url('fonts/SuisseIntlMono-Regular-WebS.woff') format('woff'),
       url('fonts/SuisseIntlMono-Regular-WebS.svg#SuisseIntlMono') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'EaseSemiRounded';
  src: url('fonts/EaseSemiRounded-Regular.woff2') format('woff2'),
       url('fonts/EaseSemiRounded-Regular.woff') format('woff'),
       url('fonts/EaseSemiRounded-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
*{
	box-sizing: border-box;
}
body {
  font-family: 'EaseSemiRounded', sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
	box-sizing: border-box;
	-webkit-font-smoothing:antialiased;
}

a{
	text-decoration: none;
			transition: all 0.2s ease;

}

a:hover{
			transition: all 0.2s ease;

}

/* === GRID SYSTEM === */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}


/* Use .row as a 12-column grid container */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.no-gap{
	gap:0px;
}

.no-limit{
	max-width: none;
	padding: 0;
}



/* Column spans */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

.col-18{ grid-column: span 18; }




.start-0 {grid-column-start: 0;}
.start-1 {grid-column-start: 1;}
.start-2 {grid-column-start: 2;}
.start-3 {grid-column-start: 3;}
.start-4 {grid-column-start: 4;}
.start-5 {grid-column-start: 5;}
.start-6 {grid-column-start: 6;}
.start-7 {grid-column-start: 7;}
.start-8 {grid-column-start: 8;}
.start-9 {grid-column-start: 9;}
.start-10 {grid-column-start: 10;}
.start-11 {grid-column-start: 11;}
.start-12 {grid-column-start: 12;}

.end-0 {grid-column-end: 0;}
.end-1 {grid-column-end: 1;}
.end-2 {grid-column-end: 2;}
.end-3 {grid-column-end: 3;}
.end-4 {grid-column-end: 4;}
.end-5 {grid-column-end: 5;}
.end-6 {grid-column-end: 6;}
.end-7 {grid-column-end: 7;}
.end-8 {grid-column-end: 8;}
.end-9 {grid-column-end: 9;}
.end-10 {grid-column-end: 10;}
.end-11 {grid-column-end: 11;}
.end-12 {grid-column-end: 12;}
.end-13 {grid-column-end: 13;}

.inline-flex{display: inline-flex;}



/* === FONT SIZE CLASSES === */
.font-xs  { font-size: 0.6rem; }
.font-sm  { font-size: 0.75rem; }
.font-md  { font-size: 0.9rem; }
.font-lg  { font-size: 1.05rem; }
.font-xl  { font-size: 1.2rem; }
.font-xxl { font-size: 1.35rem; }
.font-xxxl { font-size: 1.5rem; }

.up{
	text-transform: uppercase;
}

/* === TEXT COLORS === */
.text-purple { color: #A2579E; }
.text-gold   { color: #8B6E37; }
.text-dark   { color: #333; }
.text-white  { color: #fff; }

/* === TYPOGRAPHY UTILITIES === */
.monospaced { font-family: 'SuisseIntlMono', monospace; }


/* === TEXT COLORS === */
.bg-purple { background-color: #A2579E; color: #fff;}
.bg-gold   { background-color: #8B6E37; color: #fff;}
.bg-dark   { background-color: #333; color: #fff;}
.bg-white  { background-color: #fff; }

.margin-bt-1{
	margin-bottom: 1rem;
}

.margin-bt-2{
	margin-bottom: 2rem;
}

.margin-bt-3{
	margin-bottom: 3rem;
}


.rounded-sm{
	padding: 5px;
	border-radius: 3px;
}

.rounded-m{
	padding: 10px 20px;
	border-radius: 15px;
}

.rounded-s{
	padding: 5px 10px;
	border-radius: 8px;
	margin-top: 0.4rem;
}

.flex-container{
	display: flex;
}

.basic-link{
	color: #333;
}


a{
	 color: #A2579E;
	
	
} 


span.arrow_right{
position: relative;
		transition: all 0.2s ease;

}

span.arrow_right:before{
position: absolute;
	content: url('assets/img/arrow_right.svg');
	font-size: inherit;
	width: 15px;
	height: 15px;
	left: -20px;
	top:0px;
		transition: all 0.2s ease;

}

.basic-link:hover span.arrow_right:before{
	transform: translateX(-5px);
	transition: all 0.2s ease;
}
	

section{
	margin-bottom: 5rem;
}

h1,h2,h3,h4,h5,h6{
	font-weight: normal;
	margin-block-start: 0em;
margin-block-end: 0em;
}


/* === HEADER === */
.main-header {
  position: fixed;
  top: 0;
  width: 100%;
 /*  background: #fff; */
  z-index: 999;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  padding: 20px;
  gap: 20px;
}

.logo img {
			transition: all 0.2s ease;5
}

.logo img {
	width: 100%;
}

.scrolled .logo img {
	width:50%;
			transition: all 0.2s ease;

}


nav.main-menu {
  justify-self: center;
}

.lang-switcher {
  grid-column: 11 / span 2;
  justify-self: end;
  display: flex;
  gap: 10px;
}

/* Dropdown menu positioning */
nav.main-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}
nav.main-menu li:hover > ul {
  display: block;
}
nav.main-menu ul ul {
  display: none;
  position: absolute;
  padding: 0;
}

nav.main-menu a:hover{
	color: #A2579E;
}

.foerder_logos{
		grid-column:span 4;
	}
	
	.foerder_logos:nth-child(2n){
		grid-column:span 5;
	}

/* === FOOTER === */
footer {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  padding: 40px 20px;
}

.footer-menu {
  grid-column: 1 / span 4;
		align-self: end;

}

.footer-logos {
  grid-column: 6 / span 7;
}

.footer-logo-group {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0px;
}

.footer-logo-group img {
	max-width: 100%;
}

.footer-logo-group .row{
	grid-template-columns: repeat(18, 1fr);
}

footer p{
	color: #333;
	font-size: 12px;
}

.footer-menu{
	
}
#menu-unten-links{
	list-style: none;
}

#menu-unten-links li{
	display: inline-block;
	margin-right: 1rem;
}


#menu-unten-links a{
	color: #333;
}

/* === SLICK SLIDER === */
.slick-slider {
  width: 100%;
}
.slick-slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* === CATEGORIES === */
.category-people  { /* custom styling... */ }
.category-projects { /* custom styling... */ }





.ausschreibungen-active{
	
}

.ausschreibungen-active .ausschreibung-item{
	border: 1px solid #A2579E;
}



.ausschreibung-item{
	margin-bottom:0.5rem;
	transition: all 0.2s ease;
}

.ausschreibung-item:hover{
	border-color: #8B6E37;
	transition: all 0.2s ease;
	color: #8B6E37;

}

.info-row-block a{
	color: #333;
}

.info-row-block a:hover{
	color: #A2579E;
}

.ausschreibung-info .info-row-block{
	margin-bottom: 5rem;
}

.people .container{
	padding: 0;
}


.person-item p,
.info-row-block p,
.project-intro p,
.project-art {
	margin-block-start:0px;
	margin-block-end:0px;
}

.project-partners ul{
	list-style: none;
	margin-block-start: 0em;
margin-block-end: 0em;
padding-inline-start: 0px;
}

.project-partners ul a{
	color: #333;
}

.intro-wrapper,
.project-thumbnail,
.info-row {
	margin-bottom: 3em;
}

.person-item img {
	max-width: 50%;
}

.person-item a{
	color:#333;
}

.person-item a:hover{
	color:#A2579E;
}
.project-thumbnail-inner img{
	width: 100%;
	height: auto;
}

.person-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;  /* lock to 3:2 */
  overflow: hidden;
}

.person-thumb img{
	max-width: 50%;
}

.person-thumb .person-img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* ensures fill while preserving proportions */
  object-position: center;
  display: block;
}




.slider_left{
	padding: 1rem 0;
	border-top: 1px solid #A2579E;
	border-bottom: 1px solid #A2579E;
}

.project_slider_intro_text{
	padding-right: 2rem;
}
.slider_right {
  background-size: cover;
  background-position: center;
	padding-bottom: 50%;
}




				/* Container positioning: align on the left instead of centered */
.slider_wrapper {
  position: relative; /* ensure absolute children are placed correctly */
}

.slider_wrapper .slick-dots {
  position: absolute;
  bottom: -20px;      /* adjust vertical offset as desired */
  left: 0px;        /* move dots to the left edge */
  width: auto;       /* allow left-aligned flow */
  text-align: left;  /* override Slick’s default centering */
  margin: 0;         /* reset any auto margins */
  padding: 0;
}

/* Increase each dot to ~3× the default size (default ≈6px) */
.slider_wrapper .slick-dots li {
  width: 12px;
  height: 12px;
  margin: 0 0px 0 0; /* spacing between dots */
}

.slider_wrapper .slick-dots li button {
  padding: 0;
}

.slider_wrapper .slick-dots li button:before {
  font-size: 12px;    /* match the li dimensions */
  line-height: 12px;
  color: #ccc;        /* inactive dot color */
  opacity: 1;         /* remove Slick’s built-in opacity transition */
}

/* Active dot color override */
.slider_wrapper .slick-dots li.slick-active button:before {
  color: #A2579E;
}



/* 1) Hide the default “prev” arrow */
.slider_wrapper .slick-prev {
  /*  display: none !important; */
	left:-75px; 
	width: 50px;
  height: 50px;
}

/* 2) Position the “next” arrow on the left, centered vertically */
.slider_wrapper .slick-next {
  position: absolute;
  top: 50%;
 /* left: -50px;                 adjust horizontal offset */
	right:-75px;
  transform: translateY(-50%);
  z-index: 2;                /* above slides */
 width: 50px;
  height: 50px;

  background-size: contain;
		transition: all 0.2s ease;

}


/* 4) (Optional) Change tint on hover */
.slider_wrapper .slick-next:hover {
  filter: hue-rotate(260deg) saturate(200%); /* example tweak, or use opacity */
}

.slider_wrapper .slick-next:before{
	  background: url("assets/img/arrow_right.svg") no-repeat center center!important;
	width: 50px!important;
	height:50px!important;
	content: ''!important;
	font-size: 0px!important;
	display: block;
		transition: all 0.2s ease;

}

.slider_wrapper .slick-prev:before{
	  background: url("assets/img/arrow_right.svg") no-repeat center center!important;
	width: 50px!important;
	height:50px!important;
	content: ''!important;
	font-size: 0px!important;
	display: block;
		transition: all 0.2s ease;
	transform: rotate(180deg);

}

.slider_wrapper .slick-next:hover{
		  transform: translateY(-50%) translateX(5px);
	transition: all 0.2s ease;

	
}

.slider_wrapper .slick-prev:hover{
		  transform: translateY(-50%) translateX(-5px);
	transition: all 0.2s ease;

	
}
	






.aktuelles-list{
	list-style: none;
		margin-block-start: 0em;
margin-block-end: 0em;
padding-inline-start: 0px;
}
	
.bullet{
	background-color: #A2579E;
	width:7px;
	height: 7px;
	border-radius: 50%;
	display: block;
	position: absolute;
	left: -20px;
	top:12px;
	display: none;
}

.aktuelles-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aktuelles-item {
  margin-bottom: 1em;
}

.aktuelles-link {
  color: inherit;
  text-decoration: none;
	position: relative;
}

.aktuelles-link:hover {
  color:#A2579E;
}

.aktuelles-date {
  display: block;
  color: #666;
}

.beside_post_thumb{
	position: relative;
	top:-8px;
}


.entscheid_in_list{
	text-align: right;
}

.entscheid_in_list span{
	position: relative;
}

.entscheid_in_list .arrow{
	position: absolute;
	height: 100%;
	right: calc(100% + 10px);
	top:0px;
		transition: all 0.2s ease;
	transform: rotate(90deg);

	
}

.entscheid_in_list:hover  .arrow{
	top: 5px;
	transition: all 0.2s ease;
}


.main-menu a{
	color: #333;
}

.past-ausschreibung-item a{
	color:#333;
}
.past-ausschreibung-item{
	border-bottom: 1px solid #333;
	padding: 1rem 0;
}





.past-ausschreibung-item,
.past-ausschreibungen-list,
.all-projects-list{
	list-style: none;
	margin-block-start: 0em;
margin-block-end: 0em;
padding-inline-start: 0px;
}



.all-projects-list{
	
}

.project-item{
	border-bottom: 1px solid #333;
	padding: 1rem 0;
}





.project-infos{
	text-align: right;
}

.project-infos span{
	position: relative;
}

.project-infos .arrow{
	position: absolute;
	height: 100%;
	right: calc(100% + 10px);
	top:0px;
		transition: all 0.2s ease;
	transform: rotate(90deg);

	
}

.project-infos:hover  .arrow{
	top: 5px;
	transition: all 0.2s ease;
}


p.people_function{
								margin: 0;
								margin-block-start:0px!important;
							}


.wp-block-image img{
	max-width: 100%;
	height: auto;
}

/* Container that we animate */
.resume-text-wrapper {
  overflow: hidden;
  max-height: 0;                 /* set by JS to 7-line height on load */
  transition: max-height 0.35s ease;
  position: relative;
}

/* Optional: subtle fade at bottom when collapsed */
.resume-text-wrapper::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.5rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  opacity: 1;
  transition: opacity .2s;
}
.resume-text-wrapper.is-expanded::after { opacity: 0; }

/* Button styling (adjust to your theme) */
.resume-toggle {
  margin-top: .5rem;
  background: none;
  border: none;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}




/* ABOUT */

.relative{
	position: relative;
}


.beirat_member{
	margin-top: 2rem;
}

.beirat-block{
	
}

.beirat-photo img{
	width: 100%;
	height: auto;
}

.member-foto-wrapper img {
	width: 100%;
	height: auto;
}

.has-image p{
	margin-block-start: 0em;
}


.member-entry .inner_wrapper{
	
	
}

..member-entry .inner_wrapper img {
	width: 25%;
	colu
}


#project-results{
	
}


#project-results .pagination{
	margin-top: 1rem;
	font-size: 2rem; 
} 

#project-results .pagination a{
	 color: #333;
	
	
} 

#project-results .pagination a.active{
	 color: #A2579E;
	
	
} 



.single-post article{
	text-align: left;
	max-width: 800px;
}

.single-post article .post-thumbnail img{
	width: 100%;
	height: auto;	
}


.category-aktuelles .entry-content{
	margin: 1rem auto;
	text-align: left;
}

.category-aktuelles img{
	width: 100%;
	height: auto
}

.category-aktuelles  .entry-title{
	color: #A2579E;
	max-width: 75%;
	margin: 2rem auto;
	
}

.aktuelles-link {
  align-items: flex-start;
  gap: 0.5rem; /* space between bullet, image, and title */
}

.aktuelles-inline-thumb img {
  width: 100%;  /* or your desired size */
  height: auto;
  
}




.placeholder{
	background-color: #8B6E37;
	opacity: 0.5;
	max-width: 50%;
}

.project-on-page-image-wrapper {
  aspect-ratio: 3 / 2;      /* keeps every image box 3:2 */
  width: 100%;
  overflow: hidden;
  position: relative;
  display: block;
}

.project-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* crops to fill box */
  object-position: center;  /* centers crop */
  display: block;
}


.submenu-toggle{
	display: none;
}


nav.main-menu{
	position: relative;
}
.lang-switcher .wpml-ls-legacy-list-horizontal a{
	padding: 2px!important;
}

.lang-switcher{
	    position: fixed;
    top: 20px;;
    right: 20px;
}

.lang-switcher ul{
	gap:3px!important;
}

.lang-switcher ul a{
	font-size: 12px;
	
}

.wpml-ls-legacy-list-horizontal{
	padding: 0px;
}

.wpml-ls-current-language a{
	color: #A2579E;
	
	
}

#team h2 {
	margin-bottom: 1rem;
}

.footer-logo-main  img {
	max-width: 120px;
}


.footer-menu-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-social-link svg {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  color: var(--text-color, #333);
  transition: color .2s ease;
}

.footer-social-link:hover svg {
  color: var(--accent-color, #0077b5); /* LinkedIn blue */
}

						@media screen and (max-width: 960px) {
							
							nav.main-menu{
								position: fixed;
							}
							
							.lang-switcher{
								position: relative;
								right: 0px;
							}
							.ausschreibung-info .info-row-block{
								margin-bottom: 2rem;
							}
							
							.team-members.row{
								grid-template-columns:repeat(8, 1fr);
							}

							.mobile-full{
								grid-column: span 12;
								
							}
							
							.mobile-12{
								grid-column-start: 1;
								grid-column-end: 13;
							}
							
							.mobile-10{
								grid-column-start: 2;
								grid-column-end: 12;
							}
							
							.mobile-col-6 {grid-column: span 6;}

							.project_slider_intro_text{
									padding-right: 2rem;
								font-size: 0.8rem;
							}
							
							.slider_wrapper .slick-prev:before,
							.slider_wrapper .slick-next:before{
								height: 25px!important;
								width: 25px!important;
								
							}
							
							.slider_wrapper .slick-next{
								right: -50px;
							}
							
							.slider_wrapper .slick-prev{
								left: -50px;
							}
							
							.project-item{
								gap:0px;
							}
							
							.project-infos{
								text-align: left;
							}
							
							
							
							.project-infos .arrow{
								right: -20px;
							}

						} /* END of 960px */




/* === MOBILE NAV (additions) === */
:root { --nav-transition: 220ms ease; }

.main-header { z-index: 1001; } /* above overlay; admin bar stays above that */

.nav-toggle{
  position:absolute; right:20px; top:20px;
  width:40px; height:40px; border:0; background:transparent; cursor:pointer;
  display:none; /* shown on <=960px */
  z-index:1002;
}
.nav-toggle .bar{
  position:absolute; left:8px; right:8px; height:2px; background:#111;
  transition: transform var(--nav-transition), opacity var(--nav-transition), top var(--nav-transition);
}
.nav-toggle .bar:nth-child(1){ top:12px; }
.nav-toggle .bar:nth-child(2){ top:19px; }
.nav-toggle .bar:nth-child(3){ top:26px; }
.nav-open .nav-toggle .bar:nth-child(1){ top:19px; transform: rotate(45deg); }
.nav-open .nav-toggle .bar:nth-child(2){ opacity:0; }
.nav-open .nav-toggle .bar:nth-child(3){ top:19px; transform: rotate(-45deg); }

.nav-overlay{ display:none; }




/* mobile panel */
@media (max-width: 960px){
	
	
	.logo{
		grid-column: span 10;	
	}
  .nav-toggle{ display:block; }

  [data-nav]{
    position: fixed; top:0; right:0; bottom:0; width:min(82vw, 420px);
    background:#fff; transform: translateX(100%);
    transition: transform var(--nav-transition);
    padding: calc(20px + 40px) 24px 24px; /* respects your header padding */
    box-shadow: -10px 0 28px rgba(0,0,0,.08);
    z-index:1001;
    overflow:auto;
  }
  .nav-open [data-nav]{ transform: translateX(0); }

  .nav-overlay{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.35);
    opacity:0; pointer-events:none; transition: opacity var(--nav-transition);
    z-index:1000;
  }
  .nav-open .nav-overlay{ opacity:1; pointer-events:auto; }

  /* vertical menu list */
  nav.main-menu ul.menu{ flex-direction: column; gap: 1.1rem; }

  /* show WPML in panel; hide desktop */
  .lang-switcher--in-nav{ display:block; margin-top:1.5rem; }
  [data-lang-desktop]{ display:none; }
}
/* skip link utility (if not present) */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:20px; top:20px; width:auto; height:auto;
  background:#000; color:#fff; padding:.5rem .75rem; z-index:1100;
}

/* === MOBILE SUBMENU ACCORDION (≤960px) ===
   Desktop keeps hover-to-open. Mobile uses accordion with .is-open class. */
@media (max-width: 960px){
  /* Reset submenu positioning for vertical flow */
  nav.main-menu ul ul{
    position: static;
    display: none;            /* hidden until .is-open */
    padding-left: 1rem;       /* indent nested items */
    margin-top: .25rem;
  }
  nav.main-menu li.is-open > ul{
    display: block;
  }

  /* Parent item accommodates a toggle button */
  nav.main-menu li.menu-item-has-children{
    position: relative;
  }
  nav.main-menu li.menu-item-has-children > a{
    padding-right: 2.25rem;   /* room for chevron */
    display: inline-block;
  }

  /* Chevron toggle button */
  .submenu-toggle{
    position: absolute;
    right: 0; top: 0;
    width: 2rem; height: 2rem;
    border: 0; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .submenu-toggle:focus{ outline: 2px solid #A2579E; outline-offset: 2px; }

  .submenu-toggle::before{
    content: '';
    width: .75rem; height: .75rem;
    border-right: 2px solid #A2579E;
    border-bottom: 2px solid #A2579E;
    transform: rotate(45deg);           /* chevron right */
    transition: transform 200ms ease;
  }
  /* Rotate chevron down when open */
  .menu-item-has-children.is-open > .submenu-toggle::before{
    transform: rotate(135deg);          /* chevron down */
  }

  /* Optional: subtle separators for top-level items */
  nav.main-menu .menu > li{
    padding-bottom: .25rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
}