/* Grundlegendes Styling */

/* max-width: 95em = 1520px
d.h. die Homepage wird nicht breiter als 1520px
1em = 16px*/

body {
font-family: Verdana, Arial, sans-serif;
background-color: #666;
max-width:95em;
margin:0em auto;
padding: 0;
display: flex;
flex-direction: column;
min-height: 101vh;
}

/* Text Banner */ 
header {
padding-top:18px;
padding-bottom:0px;
margin-top:0px;
margin-bottom:0px;
background-color:#444;
border-bottom: 0px solid #999999;
}

header p {
padding-top: 0px;
padding-bottom: 0px;
text-align:center;
}

header a:link {
color: #f2f2f2;
font-size: 1.2em;
text-decoration: none;
}

header a:visited {
color: #f2f2f2;
}

/* Banner mit Grafik */
.banner {
background: #000000 url(grafik_banner.jpg) no-repeat center;
color: white;
height:180px;
text-align: center;
padding-top: 0px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
}

/* Navigation - Container */
.navbar {
background-color: #cdcdcd;
border-bottom: 2px solid #444;
position: relative;
top: 0;
z-index: 1000;
}

/* Navigation - Liste (Flexbox für automatische Breite) */
.menu {
background-color: #cdcdcd;
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
flex-wrap: wrap; /* Erlaubt Umbruch bei sehr vielen Punkten */
}

.menu li a {
display: block;
font-size:1.2em;
color: #000000;
text-decoration: none;
padding: 15px 15px;
background-color: #cdcdcd;
transition: background 0.3s;
white-space: nowrap; /* Textlänge anpassen */
}

.menu li a:hover {
background-color: #f2f2f2;
}

/* Hamburger Menü Checkbox verstecken */
#menu-toggle {
display: none;
}

/* Hamburger Icon */
.hamburger {
display: none;
color: #000;
font-size: 30px;
padding: 10px 20px;
cursor: pointer;
text-align: center;
}

/* Inhalt & Footer */
.content {
background-color: #f2f2f2;
padding-top: 15px;
padding-left: 12%;
padding-right: 12%;
padding-bottom: 25px;
flex: 1;
}

/* UnterNavigation */
.navunter {
border-bottom:1px solid #999999;
margin-bottom:30px;
}

.navunter ul {
list-style:none;
padding-left:0px;
text-align:left;
}

.navunter ul li {
display:inline-block;
}

.navunter ul li a {
font-size:1.1em;
line-height:2.5em;
font-weight: bold;
text-decoration:underline;
color:#336699;
margin-right:15px;
}

.navunter ul li a:visited {
color:#336699;
}

.navunter ul li a:hover {
color:red;
text-decoration:none;
}

/* Links*/
a:link, a:visited, a:active {
color:#336699;
text-decoration:underline;
font-weight:normal;
}

a:hover {
color:red;
text-decoration:none;
}

a.extern {
background-image: url("externlink2.jpg");
background-repeat: no-repeat;
background-position: 0 center;
padding-left: 20px;
}

/* Button ohne Link */
.button1 {
display:inline-block;
text-align:center;
background-color:#ccddea;
border-radius:10px;
border:solid 2px #4682B4;
padding-top:2px;
padding-left:6px;
padding-right:6px;
padding-bottom:2px;
}

/* Button mit Link */
a.button:link, a.button:visited {
text-align:center;
text-decoration: none;
background-color:#D8E5EE;
border-radius:10px;
border:solid 2px #4682B4;
padding-top:5px;
padding-left:8px;
padding-right:8px;
padding-bottom:7px;
}

a.button:hover {
background-color:#4682B4;
color:#ffffff;
text-decoration: none;
}

a.document {
background-image: url("document.gif");
background-repeat: no-repeat;
background-position: 0 center;
padding-left: 20px;
}

a.audio {
background-image: url("audio.jpg");
background-repeat: no-repeat;
background-position: 0 center;
padding-left: 25px;
}

a.video {
background-image: url("video.jpg");
background-repeat: no-repeat;
background-position: 0 center;
padding-left: 25px;
}

h1 {
font-size:1.4em;
line-height:1.5em;
margin-top: 20px;
margin-bottom: 20px;
padding-bottom:5px;
color:#777777;
border-bottom: 2px solid #999999;
}

h2 {
font-size:1.2em;
line-height:1.5em;
margin-top:25px;
margin-bottom:10px;
color:#777777;
}

p {
font-size: 1.2em;
line-height: 1.5em;
color:#555555;
padding-top:0px;
margin-top:0px;
margin-bottom: 15px;
}

.linie {
border-top: 1px solid #999999;
margin-top: 18px;	
}

.linie1 {
border-top: 1px solid #999999;
margin-top: 30px;	
}

.textcenter {
text-align:center;
}

.blocksatz {
text-align:justify;
}

.rot {
color:red;
}

.rand {
border: 1px solid #999;
background: #ffffff;
padding:10px;
}

/*Bilder*/
img {
max-width: 100%;
height: auto;
}

/*Video*/
video {
max-width: 100%;
height: auto;
}

img.rand {
margin-top:5px;
border:2px solid #027AB6;
padding:3px;
}

img.rand1 {
margin-top:5px;
border:2px solid #666666;
padding:3px;
}

.bildlinks {
float:left;
margin-top:5px;
margin-left:0px;
margin-right:25px;
margin-bottom:0px;
padding:5px;
border:1px solid #cdcdcd;
}

.bildlinks1 {
float:left;
margin-top:5px;
margin-left:5px;
margin-right:15px;
margin-bottom:0px;
border-radius:8px;
border:0px solid #cdcdcd;
}

.bildrechts {
float:right;
margin-top:5px;
margin-left:10px;
margin-right:0px;
margin-bottom:1px;
padding:3px;
border:2px solid #cdcdcd;
}

.bildrechts1 {
float:right;
margin-top:5px;
margin-left:10px;
margin-right:10px;
margin-bottom:0px;
padding:5px;
border-radius:8px;
border:0px solid #cdcdcd;
}

/* Summary*/

/* Aufklappen-Styling */
details {
border: 0px solid #ccc;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 5px;
}

/* Header-Styling */
summary {
cursor: pointer;
list-style: none; /* Entfernt Standard-Pfeil */
color:#336699;
font-size:1.2em;
line-height:1.5em;
}

/* Styling im geöffneten Zustand */
details[open] {
border: 1px solid #ccc;
background-color: #ffffff;
}

/* Eigener Marker (optional) */
summary::before {
content: "▶ ";
color:red;
}
details[open] summary::before {
content: "▼ ";
}

/*Tabelle*/

table {
font-size:1.1em;
border-collapse:collapse;
overflow-x: auto;
display: block;
}

caption {
background:#cdcdcd;
color:#555555;
font-weight:bold;
text-align:center;
padding:5px;
border-top:1px solid #555555;
border-left:1px solid #555555;
border-right:1px solid #555555;
border-bottom:0px solid #555555;
}

th {
background:#f5f5f5;
color:#555555;
padding-top:2px;
padding-left:5px;
padding-right:5px;
padding-bottom:4px;
border-top:1px solid #555555;
border-left:1px solid #555555;
border-right:1px solid #555555;
border-bottom:1px solid #555555;
}

th.links {
text-align:left;
}

th.zentriert {
text-align:center;
}

th.rechts {
text-align:right;
}

tr {
background-color: #ffffff;
}

td {
color:#555555;
padding-top:2px;
padding-left:5px;
padding-right:5px;
padding-bottom:4px;
border:1px solid #555555;
vertical-align:top;
}

td.rechts {
text-align:right;
}

td.rechtsmitte {
text-align:right;
vertical-align:middle;
}

td.rechtstop {
text-align:right;
vertical-align:top;
}

td.mitte {
vertical-align:middle;
}

td.zentriert {
text-align:center;
}

/*Tabelle sortiert*/

.sortierbar {
font-size:1.1em;
border-collapse:collapse;
}

.sortierbar th {
background:#cdcdcd;
color:#555555;
padding-top:5px;
padding-left:5px;
padding-right:5px;
padding-bottom:4px;
border:1px solid #666666;
}

.sortierbar th.links {
text-align:left;
}

.sortierbar td {
color:#555555;
padding-top:2px;
padding-left:5px;
padding-right:5px;
padding-bottom:4px;
border:1px solid #555555;
vertical-align:top;
}

.sorttdhg1 {
background:#009ACD;
}

.sorttdhg2 {
background:#EEA2AD;
}

.sortierbar td.rechts {
text-align:right;
}

.sortierbar td.zentriert {
text-align:center;
}

/*Listen*/

ul {
padding-left: 1.5em;
}

ol {
padding-left: 2.5em;
}

.listen {
color:#444444;
font-size:1.2em;
line-height:1.6em;
}

/* Boxen */

.flex-container {
display: flex;
flex-flow: row wrap;
gap: 1em;
margin-bottom:10px;
}

.flex-item {
flex: 1;
}

.item1 {
background-color: #ffffff;
box-shadow:10px 10px 10px #cdcdcd;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
}

.itemleer1 {
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
}

/*Bildergalerie Fancybox Thumbs*/
.fancybox
{
margin:0px 0px 0px 0px;      /* oben rechts unten links */
height:80px;
width:auto;
background-color:#4F4F4F;
border:solid 5px #333333;
}

img.fancybox:hover {
border:solid 5px red;
}

#footer { 
background-color: #444;
padding-top:0px;
padding-bottom:5px;
border-top:solid 0px #027AB6;
text-align:center;
margin-bottom:0px;
line-height:2.5em;
}

#footer ul {
list-style:none;
}

#footer ul li {
display:inline-block;
padding:0px;
color: white; 
}

#footer ul li a {
font-size:1.0em;
font-weight:bold;
text-decoration:none;
color: #f2f2f2;
padding:10px;
margin-right:10px;
border: 0px solid #00688b;
}

#footer ul li a:visited {
color: #f2f2f2;
}

#footer ul li a:hover {
background-color: #666;
}




/* --- Responsive Breakpoint (1024px) --- */
@media (max-width: 1024px) {
	
.hamburger {
display: block; /* Icon anzeigen */
}

.menu {
display: none; /* Menü verstecken */
flex-direction: column;
width: 100%;
}

/* Checkbox Trick: Wenn aktiv, Menü anzeigen */
#menu-toggle:checked ~ .menu {
display: flex;
margin-bottom:20px;
}

body {
font-size:90%;
}

.menu li {
width: 100%;
text-align: center;
}

.content {
padding-left: 15px;
padding-right: 15px;
}

 .flex-container {
flex-direction: column;
margin-bottom:10px;
}

ul {
padding-left: 1.0em;
}

ol {
padding-left: 1.3em;
}

}