/* Main Stylesheer for KannFinden.at */

body {
	margin: 0;
	}
* {box-sizing: border-box;}

html {
  scroll-behavior: smooth;
}

img.bg {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1800px;
	
	/* Set up proportionate scaling */
	width: 100%;
	height: auto;
	
	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;

	animation-name: img;
	animation-duration: 4s;
	z-index: -1;

}
/* The animation code */
@keyframes img {
  from {opacity: 0.01;}
  to {opacity: 1.0;}
}

@media screen and (max-width: 700px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -850px;   /* 50% */
    margin-top: -100px;   /* 50% */
	width: 100%;
 }
}

#first {
	border-color: rgba(154, 175, 50, 1.0);
	color: #888;
}
#second {
	border-color: rgba(84,84,84,1.0);
	color: #888;
}
#third {
	border-color: rgba(225, 0, 0, 1.0);
	color: #888;
}

#first:hover {
	background-color: rgba(154, 175, 50, 1.0);
	color: #fff;
}
#second:hover {
	background-color: rgba(84,84,84,1.0);
	color: #fff;
}
#third:hover {
	background-color: rgba(225, 0, 0, 1.0);
	color: #fff;
}

/* Base Popup Styles */
.popup {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow-y: auto; /* Allow scrolling if content is large */
}
.popup-content {
    background-color: #fff;
    border-radius: 8px;
    margin: 5% auto;
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
/* Close Button (Universal Styling) */
.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
    z-index: 10; /* Ensure it appears above all content */
    transition: color 0.3s ease;
}

.close:hover {
    color: #e57e25; /* Dark orange on hover */
}

/* Input Row Styling */
.input-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 600px;
    margin: 20px auto;
    padding: 10px 0;
}

.input-row label {
    font-size: 16px;
    margin-right: 10px;
    color: #555;
}

.input-row input[type="date"] {
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    flex: 1;
    margin-right: 10px;
}

.input-row button {
    padding: 8px 15px;
    background-color: #f9b256; /* Light orange */
    color: #555;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.input-row button:hover {
    background-color: #e57e25; /* Dark orange */
    color: #fff;
}

/* Table Styling */
table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

th {
    background-color: #f9b256; /* Light orange */
    color: #555;
    font-size: 18px;
    text-align: left;
    padding: 10px;
}

td {
    font-size: 16px;
    padding: 10px;
    vertical-align: top;
}

img {
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    max-width: 100px;
    height: auto;
}

/* =============================== Handy Auflösung =============================== */
@media screen and (max-width: 800px) {

	h1 {
		color: #fff;  
		font-family: Literata; 
		font-size: 1.9em; 
		font-weight: 600;
		text-align: center;
		margin-top: -5px;
		margin-bottom: 2px;
		padding-bottom: 10px;
		padding-top: 15px;
		opacity: 1.0; 
		text-shadow: 2px 2px 8px #777;
		background-color: #bbb;
	}

	.front-title {
		font-family: Literata;
		max-width: 700px;
		font-size: 1.0em;
		color: #777;
		text-align: center;
		margin: auto;
		padding-top: 50px;
		padding-left:10px;
		padding-right:10px;
	}


	.front-image-container {
		margin-top: 25%;
		display: flex;
		justify-content: center;
	}
	.front-image {
		width: 35%;
	}
	
	.sub-title {
		color: #777;  
		font-family: Literata; 
		font-size: 1.0em; 
		line-height: 1.7em; 
		font-weight: 300;
		text-align: center;
		padding-left: 3%;
		padding-right: 3%;
		margin-top: -5px;
	}

	/* ------ ANFANG Cookie Consent ------ */
	#cookies{
		visibility: hidden;
		position: fixed;
		width: 100%;
		margin: auto;
		bottom: 5px;
	}
	
	#cookies.show {
		visibility: visible;
		-webkit-animation: fadein 2s;
		animation: fadein 2s;
		position: fixed;
		background: rgba(255,355,255,0.7);
	}
	
	@-webkit-keyframes fadein {
		from {bottom: -150px; opacity: 0;} 
		to {bottom: 5px; opacity: 1;}
	}
	
	@keyframes fadein {
		from {bottom: -150px; opacity: 0;}
		to {bottom: 5px; opacity: 1;}
	}
	
	.sub-title {
		color: #777;  
		font-family: Literata; 
		font-size: 1.5vw; 
		line-height: 2.5vw; 
		font-weight: 300;
		text-align: center;
		padding-left: 10%;
		padding-right: 10%;
		margin-top: -20px;
		}

	
	.cookieContainer{
		background-color: #F0F0F0;
	}
	.cookieContainerTitle {
		font-family: Oswald; 
		font-size: 1.0em;
		text-align: center;
		color: #888;
		padding-top: 15px;
	}
	.cookieContainerText {
		padding: 5px;
		font-family: Oswald; 
		font-size: 0.7em;
		line-height: 1.1em;
		text-align: center;
		color: #888;
	}
	
	.cookieNavbar {
		text-align: center;
		width: 100%;
		margin: auto;
		background-color: #FFF;
		overflow: auto;
		padding-top: 5px;
	}

	.cookieNavbar a {
		float: left;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-left: 1%;
		margin-bottom: 5px;
		background-color: white; 
		border: 3px solid rgba(154, 154, 154, 1.0);
		border-radius: 3px;
		font-weight: 500;
		color: #888;
		text-decoration: none;
		font-family:Oswald; 
		font-size: 14px;
		line-height: 16px;
		width: 32%; 
		text-align: center;
	}

/* ============== Popup Window Styling ============== */
.popup {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Slightly darker background for focus */
    overflow-y: auto; /* Allow scrolling for smaller screens or large content */
}

/* Popup Content */
.popup-content {
    width: 90%; /* Default width for larger screens */
    max-width: 550px; /* Limit the width on large screens */
    padding: 20px;
    background-color: #fff; /* White background for contrast */
    border-radius: 8px; /* Rounded corners for a modern look */
    margin: 5% auto; /* Centered horizontally and vertically */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    position: relative; /* For internal positioning */
    animation: fadeIn 0.3s ease-out; /* Smooth fade-in effect */
    text-align: center; /* Center content */
    font-family: "Literata", serif; /* Use a matching font for harmony */
    font-size: 16px; /* Slightly smaller default font size */
}

/* Headings */
.popup-content h2 {
    font-size: 1.2em; /* Slightly larger heading */
    margin-bottom: 15px; /* Space below heading */
    color: #666; /* Softer text color */
    font-weight: bold;
}

/* Image Styling */
.popup-content img {
    max-width: 100%; /* Full width responsiveness */
    height: auto; /* Maintain aspect ratio */
    margin: 15px 0; /* Space around the image */
    border-radius: 5px; /* Rounded corners for a polished look */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Image Credit Styling */
.popup-content .image-credit {
    margin-top: -15px; /* Small space between image and credit */
    font-size: 12px; /* Smaller font size */
    color: #aaa; /* Light gray color */
    text-align: left; /* Align to the left */
}

/* Button Styling */
.button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #f9b256; /* Light orange */
    color: #555; /* Dark grey text */
    text-decoration: none;
    border-radius: 5px; /* Smooth corners */
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Slight button shadow */
}
.button:hover {
    background-color: #e57e25; /* Dark orange */
    color: #fff; /* White text for contrast */
    transform: scale(1.05); /* Subtle scaling effect */
}

/* Close Button */
.close {
    position: absolute; /* Positioned inside the popup */
    top: 0px;
    right: 10px;
    font-size: 2em;
    font-weight: bold;
    color: #999; /* Lighter grey */
    cursor: pointer;
    transition: color 0.3s ease;
}
.close:hover {
    color: #e57e25; /* Highlighted on hover */
}

/* Fade-in Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
		
}



/* =============================== Tablet Auflösung =============================== */
@media screen and (min-width: 801px) and (max-width: 1300px){

	h1 {
		color: #fff;  
		font-family: Literata; 
		font-size: 3.7em; 
		font-weight: 600;
		text-align: center;
		margin-top: -5px;
		margin-bottom: 2px;
		padding-bottom: 20px;
		padding-top: 10px;
		opacity: 1.0; 
		text-shadow: 2px 2px 8px #777;
		background-color: #bbb;
	}

	.front-title {
		font-family: Literata;
		max-width: 700px;
		font-size: 1.3em;
		color: #777;
		text-align: center;
		margin: auto;
		padding-top: 100px;
		padding-left:15px;
		padding-right:15px;
	}


	.front-image-container {
		margin-top: 11%;
		display: flex;
		justify-content: center;
	}
	.front-image {
		width: 21%;
	}

	/* ------ ANFANG Cookie Consent ------ */
	#cookies{
		visibility: hidden;
		position: fixed;
		width: 100%;
		margin: auto;
		bottom: 5px;
	}
	
	#cookies.show {
		visibility: visible;
		-webkit-animation: fadein 2s;
		animation: fadein 2s;
		position: fixed;
		background: rgba(255,355,255,0.7);
	}
	
	@-webkit-keyframes fadein {
		from {bottom: -150px; opacity: 0;} 
		to {bottom: 5px; opacity: 1;}
	}
	
	@keyframes fadein {
		from {bottom: -150px; opacity: 0;}
		to {bottom: 5px; opacity: 1;}
	}
	
	.sub-title {
		color: #777;  
		font-family: Literata; 
		font-size: 1.5vw; 
		line-height: 2.5vw; 
		font-weight: 300;
		text-align: center;
		padding-left: 10%;
		padding-right: 10%;
		margin-top: -20px;
		}
	
	.cookieContainer{
		background-color: #F0F0F0;
	}
	.cookieContainerTitle {
		font-family: Oswald; /*'Arial', Helvetica, Verdana; */
		font-size: 1.7em;
		text-align: center;
		color: #888;
		/*text-shadow: 2px 2px 8px #000033;	*/
		padding-top: 15px;
	}
	.cookieContainerText {
		padding: 15px;
		font-family: Oswald; /*'Arial', Helvetica, Verdana; */
		font-size: 1.0em;
		line-height: 1.4em;
		text-align: center;
		color: #777;
		/*text-shadow: 2px 2px 8px #000033;	*/
	}
	
	.cookieNavbar {
		width: 500px;
		margin: auto;
		padding-top: 5px;
		/* background-color: #F3F3F3; */
		background-color: #fff;
		overflow: auto;
	}
	.cookieNavbar a {
		float: left;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-left: 1%;
		margin-bottom: 5px;
		background-color: white; 
		border: 3px solid rgba(154, 154, 154, 1.0);
		border-radius: 3px;
		font-weight: 500;
		color: #888;
		text-decoration: none;
		font-family:Oswald; /*'Arial Narrow', Helvetica, Verdana; */
		font-size: 17px;
		line-height: 20px;
		width: 32%; /* 3 links of equal widths */
		text-align: center;
	}
	
/* ============== Popup Window Styling ============== */
.popup {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Slightly darker background for focus */
    overflow-y: auto; /* Allow scrolling for smaller screens or large content */
}

/* Popup Content */
.popup-content {
    width: 50%; /* Default width for larger screens */
    max-width: 550px; /* Limit the width on large screens */
    padding: 20px;
    background-color: #fff; /* White background for contrast */
    border-radius: 8px; /* Rounded corners for a modern look */
    margin: 5% auto; /* Centered horizontally and vertically */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    position: relative; /* For internal positioning */
    animation: fadeIn 0.3s ease-out; /* Smooth fade-in effect */
    text-align: center; /* Center content */
    font-family: "Literata", serif; /* Use a matching font for harmony */
    font-size: 16px; /* Slightly smaller default font size */
}

/* Headings */
.popup-content h2 {
    font-size: 1.8em; /* Slightly larger heading */
    margin-bottom: 15px; /* Space below heading */
    color: #666; /* Softer text color */
    font-weight: bold;
}

/* Image Styling */
.popup-content img {
    max-width: 100%; /* Full width responsiveness */
    height: auto; /* Maintain aspect ratio */
    margin: 15px 0; /* Space around the image */
    border-radius: 5px; /* Rounded corners for a polished look */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Image Credit Styling */
.popup-content .image-credit {
    margin-top: -15px; /* Small space between image and credit */
    font-size: 12px; /* Smaller font size */
    color: #aaa; /* Light gray color */
    text-align: left; /* Align to the left */
}

/* Button Styling */
.button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #f9b256; /* Light orange */
    color: #555; /* Dark grey text */
    text-decoration: none;
    border-radius: 5px; /* Smooth corners */
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Slight button shadow */
}
.button:hover {
    background-color: #e57e25; /* Dark orange */
    color: #fff; /* White text for contrast */
    transform: scale(1.05); /* Subtle scaling effect */
}

/* Close Button */
.close {
    position: absolute; /* Positioned inside the popup */
    top: 0px;
    right: 10px;
    font-size: 2em;
    font-weight: bold;
    color: #999; /* Lighter grey */
    cursor: pointer;
    transition: color 0.3s ease;
}
.close:hover {
    color: #e57e25; /* Highlighted on hover */
}

/* Fade-in Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
	
}



@media screen and (min-width: 1300px){
/* =============================== PC Auflösung =============================== */

	h1 {
		color: #fff;  
		font-family: Literata; 
		font-size: 4.1em; 
		font-weight: 600;
		text-align: center;
		margin-top: -5px;
		margin-bottom: 2px;
		padding-bottom: 20px;
		padding-top: 10px;
		opacity: 1.0; 
		text-shadow: 2px 2px 8px #777;
		background-color: #bbb;
	}

	.front-title {
		font-family: Literata;
		max-width: 700px;
		font-size: 1.5em;
		color: #777;
		text-align: center;
		margin: auto;
		padding-top: 100px;
		padding-left:20px;
		padding-right:20px;
	}

	.front-image-container {
		margin-top: 8%;
		display: flex;
		justify-content: center;
	}
	
	.front-image {
		width: 9%;
	}


	/* -- ANFANG Cookie Consent -- */
	#cookies{
		visibility: hidden;
		position: fixed;
		width: 100%;
		margin: auto;
		bottom: 5px;
	}

	#cookies.show {
		visibility: visible;
		-webkit-animation: fadein 2s;
		animation: fadein 2s;
		position: fixed;
		background: rgba(255,355,255,0.7);
	}

	@-webkit-keyframes fadein {
		from {bottom: -150px; opacity: 0;} 
		to {bottom: 5px; opacity: 1;}
	}

	@keyframes fadein {
		from {bottom: -150px; opacity: 0;}
		to {bottom: 5px; opacity: 1;}
	}

	.sub-title {
		color: #777;  
		font-family: Literata; 
		font-size: 1.5vw; 
		line-height: 2.5vw; 
		font-weight: 300;
		text-align: center;
		padding-left: 10%;
		padding-right: 10%;
		margin-top: -20px;
	}

	.cookieContainer{
		background-color: #F0F0F0;
	}
	.cookieContainerTitle {
		font-family: Oswald; /*'Arial', Helvetica, Verdana; */
		font-size: 1.5em;
		text-align: center;
		color: #888;
		padding-top: 15px;
	}
	.cookieContainerText {
		padding: 15px;
		font-family: Oswald; /*'Arial', Helvetica, Verdana; */
		font-size: 1.0em;
		line-height: 1.4em;
		text-align: center;
		color: #777;
	}

	.cookieNavbar {
		width: 500px;
		margin: auto;
		padding-top: 5px;
		background-color: #fff;
		overflow: auto;
	}
	.cookieNavbar a {
		float: left;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-left: 1%;
		margin-bottom: 5px;
		background-color: white; 
		border: 3px solid rgba(154, 154, 154, 1.0);
		border-radius: 3px;
		font-weight: 500;
		color: #888;
		text-decoration: none;
		font-family:Oswald; /*'Arial Narrow', Helvetica, Verdana; */
		font-size: 17px;
		line-height: 20px;
		width: 32%; /* 3 links of equal widths */
		text-align: center;
	}
	
/* ============== Popup Window Styling ============== */
.popup {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Slightly darker background for focus */
    overflow-y: auto; /* Allow scrolling for smaller screens or large content */
}

/* Popup Content */
.popup-content {
    width: 50%; /* Default width for larger screens */
    max-width: 550px; /* Limit the width on large screens */
    padding: 20px;
    background-color: #fff; /* White background for contrast */
    border-radius: 8px; /* Rounded corners for a modern look */
    margin: 5% auto; /* Centered horizontally and vertically */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    position: relative; /* For internal positioning */
    animation: fadeIn 0.3s ease-out; /* Smooth fade-in effect */
    text-align: center; /* Center content */
    font-family: "Literata", serif; /* Use a matching font for harmony */
    font-size: 16px; /* Slightly smaller default font size */
}

/* Headings */
.popup-content h2 {
    font-size: 1.8em; /* Slightly larger heading */
    margin-bottom: 15px; /* Space below heading */
    color: #666; /* Softer text color */
    font-weight: bold;
}

/* Image Styling */
.popup-content img {
    max-width: 100%; /* Full width responsiveness */
    height: auto; /* Maintain aspect ratio */
    margin: 15px 0; /* Space around the image */
    border-radius: 5px; /* Rounded corners for a polished look */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Image Credit Styling */
.popup-content .image-credit {
    margin-top: -15px; /* Small space between image and credit */
    font-size: 12px; /* Smaller font size */
    color: #aaa; /* Light gray color */
    text-align: left; /* Align to the left */
}

/* Button Styling */
.button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #f9b256; /* Light orange */
    color: #555; /* Dark grey text */
    text-decoration: none;
    border-radius: 5px; /* Smooth corners */
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Slight button shadow */
}
.button:hover {
    background-color: #e57e25; /* Dark orange */
    color: #fff; /* White text for contrast */
    transform: scale(1.05); /* Subtle scaling effect */
}

/* Close Button */
.close {
    position: absolute; /* Positioned inside the popup */
    top: 0px;
    right: 10px;
    font-size: 2em;
    font-weight: bold;
    color: #999; /* Lighter grey */
    cursor: pointer;
    transition: color 0.3s ease;
}
.close:hover {
    color: #e57e25; /* Highlighted on hover */
}

/* Fade-in Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/*
	.input-row {
        flex-direction: row;
        justify-content: space-between;
        max-width: 600px;
    }

    .input-row input[type="date"],
    .input-row button {
        font-size: 16px;
    }

    table {
        max-width: 600px;
        font-size: 16px;
    }

    th {
        font-size: 18px;
        padding: 12px;
    }

    td {
        font-size: 16px;
        padding: 12px;
    }

    img {
        max-width: 100px;
    }
	*/
}