/* individuelle CSS-Einstellungen fuer San Fernando
------------------------------------------------------- */

@font-face {
  font-family: 'American_Dreams'; /* eigener Name */
  src: url('../fonts/American_Dreams_Demo/American_Dreams_Demo.otf') format('opentype'); /* Fallback, besser woff2 oder woff */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Marbre_Sans'; /* eigener Name */
  src: url('../fonts/Marbre-Sans/Marbre-Sans.ttf.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto_Condensed'; /* eigener Name */
  src: url('../fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Elegant_Typewriter'; /* eigener Name */
  src: url('../fonts/ELEGANT-TYPEWRITER1/ELEGANT-TYPEWRITER1.ttf.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TeX_Gyre_Pagella'; /* eigener Name */
  src: url('../fonts/TeX-Gyre-Pagella/texgyrepagella-regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

html {
    scroll-behavior: smooth; /* Für sanftes Scrollen */
}

body {
	background-color: rgb(23, 7, 7) !important;
	color: rgb(146, 146, 146);
	font-family: 'Roboto_Condensed', Arial, sans-serif !important;
}

.first-container {
	margin-top: 80px;
}

a:link, a:visited, a:hover, a:active {
	color: rgb(146, 146, 146);
}

.parallax-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
	z-index: -1;
}

.parallax-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(0);
    will-change: transform;
}

/* height: 100%; */
/* object-fit: cover; */

.hero {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.titel {
	text-align: center;
	color: rgb(253, 205, 70);
	font-family: 'Marbre_Sans', Arial, sans-serif !important;
	font-size: clamp(35px, 10vw, 90px);
}

.subtitel {
	color: rgb(146, 146, 146);
	/*font-family: 'Marbre_Sans', Arial, sans-serif !important;*/
	/*font-size: clamp(20px, 7vw, 30px);*/
	font-size: 16px;
	text-transform: uppercase;
}


.card {
	background-color: rgb(23, 7, 7) !important;
}

.card-body {
	padding-top: 0px !important;
}

.card-title {
	text-transform:uppercase;
	color: rgb(239, 238, 230);
	font-family: 'Roboto_Condensed', Arial, sans-serif !important;
}

.card-text {
	/*text-transform:uppercase;*/
	color: rgb(239, 238, 230);
	font-family: 'Roboto_Condensed', Arial, sans-serif !important;
}


.navbar {
	background-color: rgb(23, 7, 7) !important;
	color: rgb(146, 146, 146) !important;
	font-family: 'Elegant_Typewriter', Arial, sans-serif !important;
	font-weight: normal;
	/*text-transform:uppercase;*/
	font-size: 16px;
}

#colette_nussbaum_menu {
	font-family: 'Marbre_Sans', Arial, sans-serif !important;
	text-transform: none;
	font-weight: normal;
	text-transform:uppercase;
	font-size: 24px;
}

#de_menu {
	color: #ffffff;
}

.navbar-brand {
	color: rgb(146, 146, 146) !important;
	font-family: 'Marbre_Sans', Arial, sans-serif !important;
}

.nav-link {
	color: rgb(146, 146, 146) !important;
}
.nav-link.active {
	color: #929292 !important;
}
.nav-link.hover {
	color: #582E15 !important;
}

.navbar-toggler-icon {
    filter: invert(100%); /* Macht die Linien weiß, wenn der Hintergrund dunkel ist */
}

.produktionen-subnav {
	text-transform:uppercase;
}

.bildbeschriftung {
	color: #ffffff;
}

[id] {
    scroll-margin-top: 80px; /* Höhe deiner Navbar */
}

.footer {
	background-color: rgb(23, 7, 7) !important;
	color: rgb(146, 146, 146) !important;
	/*font-family: 'Elegant_Typewriter', Arial, sans-serif !important;*/
	font-weight: normal;
	/*text-transform:uppercase;*/
	font-size: 16px;
}

.footer > .container > a {
	text-decoration: none;
}

.gallery-item {
    background: #222;      /* Letterbox-Farbe */
    border-radius: 8px;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 400px;         /* größerer Kasten */
    object-fit: contain;   /* komplettes Bild sichtbar */
    display: block;
}

.gallery-item:hover img {
    transform: scale(1.05);
}