.start {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
	}
	body {
		font-family: 'Yu Gothic UI Light', sans-serif;
		overflow-x: hidden;
	} 
	
	h3 {
		font-size: 2.5rem;
	}
	
	.navbar-toggler {
		border:0;
	}
	
	.navbar {
		padding:20px 0;
	}

	header .container {
		border-bottom: 1px solid #eee;
		padding-bottom: 20px;				
	}
	
	header .container, header .navbar-brand {
		font-size: 1rem;
	}

	.navbar-brand {
		font-family: 'Yu Gothic UI Semibold', sans-serif;
	}
	
	
	.nav-link {
		color: #555;
		font-size: 1rem;
	}
	
	.footer {
		margin-top: 2rem;
		padding: 1rem 0;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.footer .footer-links {
		list-style: none;
		padding: 0;
		display: flex;
		gap: 1.5rem;		
	}
	.footer .footer-links li {
		display: inline;
	}	

	.footer a {
		color: #000 !important;
	}

	.footer a { text-decoration: none; }

	.footer .container { border-top: 1px solid #eee; padding-top: 20px;}
	
	.email {
		text-decoration: none;
		color:#000;
		font-size:0.3em;
	}
	
	.orange {
		color: orange;
	}

	.p-content {
		color: #555;
	}
	
	.text-left {
		text-align: left;
	}
	
	.pt-0 {
		padding-top: 0;
	}
	.img-main {
		width:620px;
	}
	.cover-text {
		font-size: small;
		/* padding:0; 3px 0; */
	}
	
.col-vertikaler-text {
	padding-left: 0px;
}
.col-img {
  padding-right: 5px;  
  padding:0;
  margin:0;
}
  .vertikaler-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.7rem;	
  }	
  
.custom-shadow {
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}

.swiper-button-prev,
.swiper-button-next {
  color: #aaa;
  margin-top:250px;
}
.swiper-pagination-bullet-active {
  background-color: #aaa;
}
.swiper-pagination-bullet {
  background-color: #000;
}


.slide-text {
    position: absolute;
	width: 280px;
	text-align: left;
    bottom: 48px;
    left: 70px;
    z-index: 1;
}
.slide-text span {
	font-size: 1.7rem;
	font-weight: bold;
}


.cover-container {
	position: relative;
	overflow: hidden;
}

.cover-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.9);
	color: #555;
	opacity: 0;
	transition: opacity 0.5s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cover-container:hover .cover-overlay {
	opacity: 1;
}

.cover-text {
	font-size: 1rem;
	text-align: left;
}


	
	/* CSS-Regel für große Bildschirme */
	@media screen and (min-width: 1200px) {
		.p-content {
		  font-size: 3.5rem;
		}
		.p-content-gallery {
			margin-top: -14px;
			margin-left: 0;
			padding-left: 0;
			font-size: 3.5rem;
		}
		.gallery-bottom-gap {
			margin-bottom:-16px;
		}
		
				.custom-text-space {
			right:70px !important;
		}
	
	}

	/* CSS-Regel für mittlere Bildschirme */
	@media screen and (min-width: 768px) and (max-width: 1199px) {
	.p-content {
	  font-size: 2.5rem;
	}
		.vertikaler-text {
			writing-mode: unset;
			transform: unset;
			font-size: 0.7rem;
			padding: 0px 7px;

		}		
		
		
		
		.p-content-gallery {
			margin-left: 0;
			padding-left: 0;			
			font-size: 2.5rem;
		}	
	}

	/* CSS-Regel für kleine Bildschirme */
	@media screen and (max-width: 767px) {
	
		h3 {
		font-size: 1.5rem;
	}
	
	
		.slide-text {
			position: unset;
			padding-top:50px !important;
			width:100%;
		}
		.swiper-pagination {
			position: unset;
		}
		
		.p-content {
		  font-size: 1.5rem;
		}
		.vertikaler-text {
			writing-mode: unset;
			transform: unset;
			font-size: 0.7rem;
			padding: 10px 12px			
		}
		
		
				.p-content-gallery {
			margin-left: 0;
			padding-left: 0;
			font-size: 1.5rem;
		}
		
		
			.email {
		text-decoration: none;
		color:#000;
		font-size:0.5em;
	}
	
	
	.cover-text {
	font-size: 0.7rem;
}
		
	
	}	

	
	
        .custom-text {
            position: absolute;
            top: 20px;
            right: 100px;
            text-align: left;
        }

        @media (max-width: 1200px) {
            .custom-text {
                position: relative;
                right: auto;
                margin-top: 20px;
            }
        }
		
		
	.projects-main {
		padding-bottom:70px;
	}
	
	
	.text-justify {
		text-align: justify;
	}
	
.profile-tab {
    color: #ff6600 !important; /* Orange */
    font-size: 1.3rem; /* Größere Schrift */
    font-weight: bold; /* Fett */
    cursor: default; /* Kein Klick möglich */
    background-color: transparent !important; /* Kein Bootstrap-Hintergrund */
    border: none !important; /* Keine Rahmen */
}

.maelstrom-section {
  color: #555;
  min-height: 100%;
}

.maelstrom-left {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.text-block {
  flex-grow: 1;
}

.artist-name {
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  margin-bottom: 0.2em;
}

.project-title {
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  
}

.location-date {
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 1.5em;
}

.project-info {
  font-size: 1.5rem;
  line-height: 1.6;
}

.coming-soon {
  font-size: 1.5rem;
  line-height: 1.6;  
}

.maelstrom-image img {
  width: 100%;        /* Bild füllt die Spalte */
  max-width: 620px;   /* aber nie größer als 620px */
  height: auto;
  border: 1px solid #ddd;
  margin-top: 1rem;
}

/* 1) Aktive Seite bleibt orange (wie bisher über .orange / .active) */
#navbarNav .navbar-nav .nav-link.orange,
#navbarNav .navbar-nav .nav-link.active,
#navbarNav .navbar-nav .nav-link[aria-current="page"] {
  color: orange;
}

/* 2) Hover für ALLE Links – inklusive nicht aktiver */
#navbarNav .navbar-nav .nav-item .nav-link:hover {
  color: orange !important; /* !important nur, falls etwas anderes drüberbügelt */
}

/* optional: sanfter Übergang */
#navbarNav .navbar-nav .nav-link {
  transition: color .2s ease;
}



/* Link in der Projektzeile standardmäßig orange */
.project-info a.nav-linkx.orange {
  color: orange ;           /* euer Orange – ggf. anpassen */
  text-decoration: none;
  transition: color .2s ease;
}

/* Hover/Fokus = Grau wie in der Navigation */
.project-info a.nav-linkx.orange:hover,
.project-info a.nav-linkx.orange:focus {
  color: #777;              /* Grau aus der Navi übernehmen, falls bekannt */
}

/* Optional: bereits besuchte Links ebenfalls orange lassen */
.project-info a.nav-linkx.orange:visited {
  color: orange ;
}



.mt-6 {
  margin-top: 4rem; /* oder 5rem, 6rem – nach Geschmack */
}
.mt-7 {
  margin-top: 5rem;
}


/* 1) Unterer Block: links Text, rechts Link – bleibt wie zuvor */
.bottom-block{
  margin-top:auto;
  display:flex;
  align-items:flex-end;   /* gemeinsame Grundlinie */
  gap:1rem;
  width:100%;
}

/* 2) Letzten Absatz ohne Extra-Abstand (sonst hängt er tiefer) */
.bottom-text .project-info:last-child{
  margin-bottom: 0;
}

/* 3) Link typografisch an die Absatzlinie binden + kein Umbruch */
.bottom-block .coming-soon a{
  display:inline-block;
  white-space:nowrap;
  line-height: 1.0;       /* sitzt auf der Grundlinie */
  padding:0;              /* .nav-link-Padding raus */
}

/* 4) Visuelle Korrektur für Bildschatten (Bootstrap .shadow-sm)
   -> nach Bedarf 0–6px justieren, bis die Linie exakt sitzt */
.bottom-block{
  padding-bottom: 4px;    /* Feinschliff: gleicht den Schlagschatten aus */
}

@media (max-width: 575.98px){
  .bottom-block{
    flex-direction: column;
    align-items: flex-start;  /* Link dann links unter Text */
    gap: .5rem;
    padding-bottom: 0;        /* Schatten-Korrektur für Mobile unnötig */
  }
}