/* Grundlayout: Fixiert den Viewport ohne Scrollen */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
}

body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
	background-image: url("../images/background.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
    margin: 0;
    padding: 20px; /* Dieser Wert bestimmt, wie viel vom Hintergrundbild oben/unten/links/rechts zu sehen ist */
    box-sizing: border-box; /* Wichtig, damit das Padding nicht zu Scrollbalken führt */
}

main {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    background: #EBEBEB;
    color: black;
    flex: 1; 
    display: flex;
    flex-direction: column;
    min-height: 0; /* Erlaubt echtes Schrumpfen der Inhalte */
	
	/* Optional: Ein leichter Schatten lässt die Seite über dem Hintergrund "schweben" */
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

/* Header: Kompakter gestaltet */
.header {
	border-top: 2px solid #b22222;
	border-bottom: 3px solid #b22222;
    flex-shrink: 0;
    height: auto; 		
    padding: 5px 10px; 
    background: linear-gradient(135deg, #2c539e 0%, #3486bc 17%, #3687c4 41%, #2b699b 54%, #3980c6 78%, #2c539e 100%);
}

.top-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.top-nav ul li {
    display: inline-block;
    padding: 15px 8px;
}

.top-nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1em;
    font-family: 'JockeyOne-Regular', sans-serif;
}
.top-nav span{
	font-size: 1.2em;
}
/* Überschrift: Kleinerer Abstand */
h1 {
	border-bottom: 2px solid #b22222;
    flex-shrink: 0;
    margin: 0;
    padding: 15px 0;
    font-size: 1.4em;
	font-weight: bold;
    background: white;
    text-align: center;
	background: #cccccc;
	background: -moz-linear-gradient(45deg,  #cccccc 0%, #d8d8d8 16%, #cccccc 100%);
	background: -webkit-linear-gradient(45deg,  #cccccc 0%,#d8d8d8 16%,#cccccc 100%);
	background: linear-gradient(45deg,  #cccccc 0%,#d8d8d8 16%,#cccccc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc',GradientType=1 );
}

.mylink a {
	color:#073876;
	text-decoration:none;
}

.mylink a:hover {
	color:#fc7316;
	text-decoration:none;
}
.mylinkhell a {
	color:blue;
	text-decoration:none;
}

.mylinkhell a:hover {
	color:#fc7316;
	text-decoration:none;
}

/* --- Footer: Kompakt und fest --- */
#footer {
    flex-shrink: 0;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    height: 30px;
    color: #E1E1E1;
	font-size: 1.1em;
    background: linear-gradient(135deg, #2c539e 0%, #3486bc 17%, #3687c4 41%, #2b699b 54%, #3980c6 78%, #2c539e 100%);
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 2px solid #b22222;
	border-bottom: 2px solid #b22222;
}

#footer div {
    font-size: 0.8em;
}

#footer a {
    color: #fff;
    text-decoration: none;
}

/* ############	*/
/* content-home */
/* ############ */

.content-home {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 	/* Bilder rücken nach oben */
    align-items: center;
    padding: 20px 0 0 0 ; 
    gap: 10px;
    min-height: 0;
}

/* Überschrift: Kleinerer Abstand */
.content-home h1 {
	border-bottom: 2px solid #b22222;
    flex-shrink: 0;
    margin: 0;
    padding: 15px 0;
    font-size: 1.3em;
    background: white;
    text-align: center;
	background: #cccccc;
	background: -moz-linear-gradient(45deg,  #cccccc 0%, #d8d8d8 16%, #cccccc 100%);
	background: -webkit-linear-gradient(45deg,  #cccccc 0%,#d8d8d8 16%,#cccccc 100%);
	background: linear-gradient(45deg,  #cccccc 0%,#d8d8d8 16%,#cccccc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc',GradientType=1 );
}


/* Großes Bild: Nutzt fast die volle Breite und viel Höhe */
.bild-gross {
    width: 98%; /* Breiter als vorher */
    flex: 3;    /* Bekommt doppelt so viel Platz wie der untere Teil */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
	
}

.bild-gross img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
	box-shadow: 10px 10px 20px grey;
	border-radius: 12px;
}

/* Kleiner Bild-Container */
.bild-container-unten {
    width: 100%;
    flex: 1;    /* Nimmt den restlichen Platz ein */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    min-height: 0;
}

.bild-klein {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
	padding: 10px 0 0px 0 ;
}

.bild-klein img {
    max-width: 100%;
    max-height: 70%; /* Nutzt den Großteil des unteren Bereichs */
    width: auto;
    height: auto;
    object-fit: contain;
	border-radius: 8px;
}

.bild-klein a {
    font-size: 0.9em;
    margin: 8px 0;
    line-height: 1.3;
    text-align: center;
}

.mq-indicator::after {
	content: "XXX"; /* Default */
	position: fixed;
	bottom: 0;
	right: 0;
	background: rgba(0,0,0,0.7);
	color: white;
	padding: 0.3em 0.6em;
	font-size: 1rem;
	font-family: monospace;
	z-index: 9999;
}

h1 {
	display: block;
	font-size: 1.4em;
	float:relative;
	border-bottom: 2px solid #b22222;
	flex-shrink: 0;
	margin: 0;
	padding: 10px 0;
	font-size: 1.4em;
	font-weight: bold;
	background: white;
	text-align: center;
	background: #cccccc;
	background: -moz-linear-gradient(45deg,  #cccccc 0%, #d8d8d8 16%, #cccccc 100%);
	background: -webkit-linear-gradient(45deg,  #cccccc 0%,#d8d8d8 16%,#cccccc 100%);
	background: linear-gradient(45deg,  #cccccc 0%,#d8d8d8 16%,#cccccc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc',GradientType=1 );
}

	
/* ################# */
/* MEDIA-QUERIES	 */
/* ################# */

@media (max-width: 1280px) { .mq-indicator::after { content: "1280"; } }
@media (max-width: 1024px) { .mq-indicator::after { content: "1024"; } }

/* Tablet und Desktop hochkant */
@media (max-width: 800px) {
	
	body {
		padding: 4px; /* Dieser Wert bestimmt, wie viel vom Hintergrundbild oben/unten/links/rechts zu sehen ist */
	}

	.header {
		padding: 0; /* Minimales Padding */
	}
	
	/* Schiebt den Inhalt ganz nach oben statt in die Mitte */
	.content-home { 
		justify-content: flex-start !important; 
        padding-top: 25px !important;
        gap: 25px !important; /* Verringert den Abstand zwischen großem und kleinem Bild */
	}
	
	/* Reduziert die Größe der Überschrift, um Platz zu gewinnen */
    h1 {
        font-size: 1.1em !important;
        padding: 10px 0 !important;
    }

    .top-nav ul {
        display: none; 
        flex-direction: column;
        background: #2c539e;
        position: absolute;
        top: 45px; /* Direkt unter dem Header */
        left: 0;
        width: 30%; 
        min-width: 150px; /* Damit es auf sehr schmalen Handys lesbar bleibt */
        
        z-index: 1000;
        box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
        border: 1px solid rgba(255,255,255,0.2);
        border-left: none; /* Sieht am Rand sauberer aus */
    }

    .top-nav ul.show {
        display: flex;
    }

    .top-nav ul li {
        display: block;
        padding: 0; /* Wir steuern den Abstand über den Link */
        border-bottom: 1px solid rgba(255,255,255,0.1);
		text-align: center;
    }

    .top-nav ul li a {
        display: block;
        padding: 10px 15px;
        font-size: 1.1em;
        width: 100%;
		
    }

    .top-nav .icon {
        display: block;
        color: white;
        padding: 10px;
        text-decoration: none;
        font-weight: bold;
        background: rgba(0,0,0,0.1); /* Leichtes Absetzen des Buttons */
    }

	/* Das große Bild darf auf dem Handy noch näher an den Rand */
    .bild-gross {
        width: 96% !important;
        flex: 0 1 auto !important; /* Verhindert unnötiges Strecken */
    }

    /* Die Portraits etwas kompakter */
    .bild-container-unten {
        margin-top: 0;
        flex: 0 1 auto !important;
    }
	
	.bild-klein {
		padding: 10px 0 0px 0 ;
	}

	.bild-klein img {
		width: 160px;
		
	}

	.bild-klein a {
		font-size: 1em;
		line-height: 1.5;
	}

	.mq-indicator::after { content: "TDH"; }
}

/* Tablet hochkant */
@media(max-width:800px) and (pointer: coarse)  { .mq-indicator::after { content: "TH";  } }

/* Tablet quer */
@media (min-width: 800px) and (max-width: 1334px) and (orientation: landscape) and (pointer: coarse) {
	
	.content-home {
		display: flex;
		flex-direction: row; /* Bilder nebeneinander statt untereinander */
		align-items: center;
		justify-content: center;
		gap: 0rem;
		margin: 0;
		margin-left: 10%;
		margin-right: 10%;
		padding: 0;
	}

	.bild-gross img {
        width: 90% !important;
        margin: 0 0 0 0;
		padding: 0;
    }
	
	.bild-container-unten {
		margin: 0;
		padding: 0 0 8px 0;
		font-size: 1em;
	}
	
	.bild-klein img {
		width: 100 % !important;
		margin: 0;
		padding: 0;
	}
	#nav-list a {
		font-size: 1.3em;
	}	
	.mq-indicator::after { content: "TQ"; }
}

/* Handy quer */
@media (min-width: 380px) and (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
	
	body {
		padding: 0;
		margin: 0;
	}
	main {
		width: 100%;
		margin: 0;
		padding: 0;
		min-height: 90%; 
	}
	
	.top-nav span{
		font-size: 1.2em;
	}
	.content-home {
		display: flex;
		flex-direction: row; /* Bilder nebeneinander statt untereinander */
		align-items: center;
		justify-content: center;
		gap: 0;
		margin: 0;
		margin-left: 6%;
		margin-right: 0%;
		padding: 0;
	}

	.bild-gross img {
        width: 66% !important;
		margin: 0 0 22px 0;
		padding: 0;
    }
	
	.bild-container-unten {
		margin: 0;
		padding: 0 0 10px 0;
		font-size: 0.9em;
	}
	
	.bild-klein img {
		width: 66% !important;
		margin: 0;
		padding: 0;
	}
	
	.mq-indicator::after { content: "HQ"; }
}

/* Handy hochkant */
@media (max-width: 480px) {
	
	.bild-klein img {
		width: 90%;
		
	}
	.mq-indicator::after { content: "HH"; }
}

/* Auf großen Bildschirmen den Button für das Hamburger Menü verstecken */
@media (min-width: 801px) {
    .top-nav .icon {
        display: none;
    }
    .top-nav ul {
        display: block !important;
    }
}