/*
	Iridium by TEMPLATED
    templated.co @templatedco
    Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/

/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/

	body
	{
	}

	body,input,textarea,select
	{
		font-size: 11pt;
	}

/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

	#header 
	{
		background-size:center;		 /*> keine Bildbeschneidung */
    	background-repeat: no-repeat;	
    	background-position: center;	 /* <*/ 
		position: relative;
		height: 30em;                	/* gewünschte Bannerhöhe */
/*		padding: 10em 1em; */   		/* 15em Höhe banner oben/unten und Seite*/
		display: flex;     
		align-items: center;         	/* vertikale Zentrierung */
		text-align: center; 
	} 

		.homepage #header
		{
			padding: 10.15em 0em; /* 15em Höhe banner Homepage! oben/unten und Seite*/
		}

		#header .container
		{
		margin-top: -5em;  /* Logo + Nav runter */
		}

/*********************************************************************************/
/* Logo                                                                          */
/*********************************************************************************/

	#logo
	{
		margin-bottom: 1em; /* 3 Abstand logo und nav zueinander*/
	}
	
		#logo h1
		{
			color: #FFF;
		}
	
		#logo h1 a
		{
			display: block;
			letter-spacing: 1px;
			text-decoration: none;
			text-transform: none;
			font-size: 5em;
			font-weight: 900;
			color: #000; 				/* Schriftfarbe Seite Header */
			font-family: "Franklin Gothic Demi Cond", serif; /* ← neue Schriftart */
		}

		#logo span img
		{
  			padding-top: 1.2em;  /* 1.2 hier einfach Wert erhöhen */
  			/* text-align: center; */
			margin-left: 280px;    /* nach rechts schieben (Wert anpassen) */
			max-height: 80px;      /* Größe anpassen (beliebig) */
            height: auto;
            width: auto;	
}
		}			
			
/*********************************************************************************/
/* Nav                                                                           */
/*********************************************************************************/

	#nav 
	{ 
	}
 				#nav > ul > li
		{
			display: inline-block;
		}
		
			#nav > ul > li:last-child
			{
				padding-right: 0;
			}

			#nav > ul > li > a,
			#nav > ul > li > span
			{
				display: block;
				padding: 0.8em 1.5em; /* 1.0 Höhe Umrandung Knopf*/
				letter-spacing: 1px;
				text-decoration: none;
				text-transform: uppercase;
				font-weight: 200;
				font-size: 1em;
				outline: 0;
				color: rgba(0,0,0,.7); /* 255,255,255,.8 */
			}


			#nav > ul > li > a:hover  /* Menü Farbe */
			{
				color: #000; /*#fff */
			}

			#nav li.active a
			{
				background: none;
				border-radius: 40px;
				border: 2px solid;
				border-color: rgba(0,0,0,.8); /* 255,255,255,.8 */
				color: #000F; /* #fff */
			}

			#nav > ul > li > ul
			{
				display: none;
			}


/*********************************************************************************/
/* Main                                                                          */
/*********************************************************************************/

	#main
	{
		padding: 2em 0em 4em 0em; /* 6 */
	}
	
	#content
	{
	}
	
	#content header
	{
		margin-bottom: 2em; /* Abstand page zu header */
	}
	
	#content header h2
	{
		font-size: 2em;
	}
	
	#content header .byline
	{
		font-size: 1.40em;
	}
	
	#sidebar h2
	{
		display: block;
		padding-bottom: 2em;
		font-size: 1.4em;
	}
/* GRID NEU */
/* Zweispaltiger Bereich: Hauptbild + Beschreibungstext */
	.proj-wrap {
	  display: grid;
	  grid-template-columns: 60% 40%;
	  gap: 32px;
	  align-items: start;
	  margin-bottom: 40px;
	}

	/* Bild-Spalte */
	  .proj-image img {
	  width: 100%;
	  height: auto;
	  display: block;
	} 

	/* Text-Spalte */
	.proj-text {
	  font-size: 1.05rem;
	  line-height: 1.55;
	  color: #999; /* 333 */
	} 

	/* Bullets in der rechten Textspalte erzwingen */
	.proj-text ul,
	.proj-text ol {
	  margin: 0 0 1.2em 1.2em;
	  padding: 0;
	  list-style-position: outside;
	}

	.proj-text ul {
	  list-style-type: disc !important;  /* falls das Theme es global entfernt */
	}

	.proj-text li {
	  margin-bottom: .45em;
	  line-height: 1.45;                 /* passend zu deinem Fließtext */
	  font-size: 1.05rem;                 /* optional: leicht größer */
	}

	/* Responsive: Spalten untereinander auf Handy */
	@media (max-width: 900px) {
	  .proj-wrap {
		grid-template-columns: 1fr;
	  }
	}

	/* Textspalte neben Projektbild */
	.proj-title {
	  white-space: nowrap;
	  font-size: 1.6rem;
	  font-weight: 700;
	  margin: 0 0 16px;
	  line-height: 1.2;
	  text-transform: none; 
	  color: #fff; /* 222 */
	}

	.proj-text {
	  border-left: 3px solid rgba(0,0,0,0.12);
	  padding-left: 18px;
	  font-size: 1.1rem; /* 1.1 */
      line-height: 1.4; /* 1.2 */
      color: #fff;  /* 222 */
      font-weight: 300;
	}

/* Kachelcontainer */
	.proj-gallery {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	  gap: 18px;
	  margin-top: 32px;
	}

	/* Element */
	.proj-thumb {
	  display: block;
	  position: relative;
	  overflow: hidden;
	}

	/* Bild */
	.proj-thumb-inner img {
	  width: 100%;
	  height: auto;
	  object-fit: cover;
	  display: block;
	  transition: transform .35s ease;
	}

	/* Caption-Overlay (versteckt bis Hover) */
	/* Bild Text */
	.proj-thumb-caption {
	  position: absolute;
	  left: 0;
	  right: 0;
	  bottom: 0;

	  padding: 20px 14px;
	  font-size: 0.95rem;
	  font-weight: 400;   /* ← Stil B (neutral, lesbar) fett=600 dünn=300 */
	  color: #fff;

	  background: linear-gradient(to top, rgba(76,76,76,0.88), rgba(76,76,76,0)); 		/* Farbe Balken 236,147,3,0  orange*/
	  opacity: 0;
	  transform: translateY(8px);
	  transition: opacity .25s ease, transform .25s ease;
	  pointer-events: none;
	}

	/* Hover-Effekt */
	.proj-thumb:hover .proj-thumb-caption {
	  opacity: 1;
	  transform: translateY(0);
	}

	.proj-thumb:hover img {
	  transform: scale(1.08); /* dezenter Zoom */
	}



/*********************************************************************************/
/* Featured                                                                      */
/*********************************************************************************/
	
	#featured
	{
		padding: 6em 0em;
	}

/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/
	
	#footer
	{
		position: relative;
		padding: 6em 0em;
	}
	
	#footer h2
	{
		padding-bottom: 2em;
		font-size: 1.4em;
		color: #aaa				/* neu */
	}
	#footer h6 {
 		padding-bottom: 2em;
		font-size: 1.0rem;
  		font-weight: 300;
  		line-height: 1.35;
    	color: #aaa;
  		margin: 0;
	}
	#footer a.podcast-link {
	  color: rgb(220,98,64);
	  font-weight: 600;
	  text-decoration: none;
	}

	#footer a.podcast-link:hover {
	  color: rgb(250,98,64);
	  text-decoration: underline; /* oder opacity: 0.7 für sanftere Wirkung */
	}

	.impressum-link {
	  color: #aaa !important;         /* Wunschfarbe → hier schwarz */
	  text-decoration: none;
	}

	.impressum-link:hover {
	  color: #aaa !important;      /* Orange beim Hover (optional) */
	}

/*********************************************************************************/
/* Team Layout NEU                                                               */
/*********************************************************************************/
/* optional: CI-Farbe zentral festlegen */
:root { --accent: rgb(236,147,3); /* dein Orange */ }

.team-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 32px;
  align-items:start;
}

/* Tablet/Phone */
@media (max-width: 1100px){ .team-grid{ grid-template-columns: repeat(2, minmax(260px,1fr)); } }
@media (max-width: 700px){  .team-grid{ grid-template-columns: 1fr; } }

.team-card{ display:flex; flex-direction:column; gap:12px; }

/* Foto ~350×580 durch Seitenverhältnis, füllt Spaltenbreite */
.team-photo{
  aspect-ratio: 35 / 35;     /* 35/58 ~350×580 */
  overflow:hidden;
  border-radius:0px; /* 8 */
  background:#f3f3f3;
}
.team-photo img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Name */
.team-name {
  font-size: 1.25rem;
  font-weight: 600;    /* fett */
  margin: 0 0 -0.8em;
  text-transform: none; /* KEINE Großbuchstaben */
  letter-spacing: 0;     /* neutral */
}

/* Titel unter dem Namen */
.team-title {
  font-size: 1rem;
  font-weight: 400;      /* nicht fett */
  color: #555;
  margin-bottom: 0.4em;  /* Abstand zum Foto */
}

/* Vita-Liste */
.team-vita{ list-style:none; margin:0; padding:0; }
.team-vita li{
  padding:6px 0; /* 10 */
  border-top:none;  /* 1px solid rgba(0,0,0,.08); >mit Linie */
  display:flex; flex-direction:column; gap:4px;
}
.team-vita li:first-child{ border-top:none; }

.vita-years{
  color: rgb(37,66,126);
  font-size:1.15rem;
  font-weight:600;
  line-height:1.1;
}
.vita-role{
  font-size:.98rem;
  line-height:1.2;
  color: #000;      /* andere Farbe als Jahre */
  font-weight:400;
}

/*********************************************************************************/
/* Logo-Laufband                                                                 */
/*********************************************************************************/
/* Logo-Laufband im Footer */
.footer-logos {
  overflow: hidden;
  background: #f5f5f5;          /* Hintergrund unten, ggf. anpassen */
  padding: 1em 0;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.footer-logos-track {
  display: inline-flex;
  align-items: center;
  gap: 3rem;                    /* Abstand zwischen Logos */
  animation: logos-scroll 30s linear infinite;
  white-space: nowrap;
}

.footer-logos img {
  height: 40px;                 /* Logo-Höhe, nach Geschmack */
  width: auto;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}

.footer-logos img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Animation: von rechts nach links scrollen */
@keyframes logos-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);  /* ggf. anpassen, je nach Anzahl Logos */
  }
}

/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/
	
	#copyright
	{
		padding: 3em 0em;
		color: #aaa
	}