@font-face {
    font-family: 'Georgia';
    src: url('fonts/Georgia.eot');
    src: url('fonts/Georgia.eot?#iefix') format('embedded-opentype'),
        url('fonts/Georgia.woff2') format('woff2'),
        url('fonts/Georgia.woff') format('woff'),
        url('fonts/Georgia.ttf') format('truetype'),
        url('fonts/Georgia.svg#Georgia') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Georgia Bold';
    src: url('fonts/Georgia-Bold.eot');
    src: url('fonts/Georgia-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Georgia-Bold.woff2') format('woff2'),
        url('fonts/Georgia-Bold.woff') format('woff'),
        url('fonts/Georgia-Bold.ttf') format('truetype'),
        url('fonts/Georgia-Bold.svg#Georgia-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
        
        :root {
            --text:'Georgia';
            --bold: 'Georgia Bold';
            --font12: 12px;
			--font14: 14px;
            --weiss: #fff;
			--dunkel: #3D2D30;
			--trans: rgba(255,255,255, .5);
        }
        
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-image: url('hild_und_heinz_full_background.jpg');
            background-size: cover;
            text-align: center;
            font-family: var(--text);
        }

        
        h1 {
        color: var(--weiss);
            letter-spacing: 1px;
            font-family: var(--text)
        }

h2 {
	color: var(--weiss);
}
        
        
        h3 {
        color: var(--weiss);
            letter-spacing: 1px;
            font-family: var(--text);
            margin: 50px 0 30px 0;
        }
        
        p {
        color: var(--weiss);
        }

        .container {
        max-width: 1300px;
        margin:auto;
        padding-top: 100px;
            
        }
        
        .logo {
            max-width: 350px;
            margin: 0 auto;
        }
        .opening-hours {
            font-size: 1.2em;
        }
        
        
        
        
        footer {
            max-width: 1320px;
            margin: auto; /* Zentriert den Footer */
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: transparent;
            color: #fff;
        }
        footer a {
            color: #fff;
            text-decoration: none;
            margin-right: 20px;
            text-transform: uppercase;
            font-size: var(--font12);
            font-family: var(--text);
            letter-spacing: 1px;
        }
        
        footer a img {
            max-width: 40px;
            height: auto;
        }

/* FORMULAR */

.formular {
	max-width: 50%;
	margin: auto;
	margin-top: 100px;
	margin-bottom: 100px;
	padding: 40px;
	background: var(--trans);
}

.kontaktformular {
    
}

.fieldSpan {
    margin-bottom: 20px;
}

.fieldSpan label {
	min-width: 100%;
	display: block;
	text-align: left;
}

.fieldCheck {
	text-align: left;
}

.fieldSpan .form-group input,
.fieldSpan .form-group textarea {
	min-width: 98%;
	font-size: var(--font14);
	padding: 10px 0 10px 10px;
	line-height: 150%;
}

.fieldSpan.button {
	text-align: left;
	margin-top: 20px;
}

.fieldSpan.button button {
	background-color: var(--dunkel);
	color: var(--weiss);
	border: 0;
	padding: 20px;
	text-transform: uppercase;
	cursor: pointer;
}

.fieldSpan button:hover {
	color: var(--dunkel);
	background: var(--weiss);
}

/* END FORMULAR */
        
        
         @media only screen and (max-width: 600px) {
            
            .container {
            padding: 20px 20px 60px 20px;
            }
                        
            footer {
                position: relative;
                padding-bottom: 20px;
            }

    
             .social img {
                max-width: 40px;
                margin-right: 15px;
                height: auto;
             }
    
            .logo img {
                min-width: 150px;
            }
             
			 .formular {
				max-width: 70%;
				margin: auto;
				margin-top: 100px;
				margin-bottom: 100px;
				padding: 40px;
				background: var(--trans);
}
			 
             footer a {
                margin-right: 10px;
             }
    
}