body
{margin-top: 0px;  margin-left: 0px; margin-right: 0px;margin-bottom: 0px; background-color: #383838; padding:0px;
background-image:url(images/bgmain.jpg);
background-repeat:repeat-y;
background-position:50% 0%;width:100%;}

#aussen
{padding:0px;margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px;
background-image:url(images/lay.jpg);background-repeat:no-repeat;
background-position:center top;
}



h1{  font-family: georgia,arial, helvetica, tahoma ,verdana, sans-serif;color:#fff;
margin-bottom:18px;letter-spacing:2px;font-size: 25px;
border-bottom:solid 0px #746b64;
padding-bottom:4px;font-style:italic;
}



h2{  font-family: georgia,arial, helvetica, tahoma ,verdana, sans-serif;color:#fff;
margin-bottom:18px;letter-spacing:2px;font-size: 17px;
border-bottom:solid 0px #746b64;
padding-bottom:4px;font-style:italic;
}



h3{  font-family: georgia,arial, helvetica, tahoma ,verdana, sans-serif;color:#fff;
margin-bottom:2px;letter-spacing:2px;font-size: 13px;
border-bottom:solid 0px #746b64;
padding-bottom:4px;
}


h4{  font-family: georgia,arial, helvetica, tahoma ,verdana, sans-serif;color:#b6b6b6;
margin-bottom:2px;letter-spacing:2px;font-size: 13px;
border-bottom:solid 0px #746b64;
padding-bottom:4px;
}

#top1 {
height:45px;
vertical-align:middle;
text-align:right;
padding-right:20px;
padding-top:20px;
color:#b6b6b6;
font-size:14px;
}

#leiste {vertical-align:middle;
text-align:justify;
padding-left:20px;
height:250px;
border-top:solid 0px #CFCFCF;
background-color: transparent;
padding-top:0px;
}


#hpname {letter-spacing:2px;font-size:27px;
font-family: georgia,"Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif; font-style:italic; color:#F4FFE1;
font-style:italic;width:100px;padding-left:20px;padding-right:20px;
border-top:solid 0px #666666;padding:20px;
}


.buleiste {vertical-align:middle;
height:52px;
border-bottom:solid 0px #fff;
background-color: transparent;
margin:0px;padding:0px;
}

.menutrenn {
border-bottom:solid 0px #fff;
color:#6ABC05;
margin:0rem;padding:0.5rem;
}


#menu2 a, #menu2 a:visited , #menu2 a:active {display: flex;
color:#E7FECB;
text-decoration:none ;
flex-direction: row; /* Nebeneinander */
justify-content: space-around;
font-size: 1.5rem;
font-family:arial, helvetica, tahoma ,verdana, sans-serif;
padding-left:0.2rem; padding-right: 0.3rem;padding-bottom: 0px; padding-top:0px;
border-left:solid 0px #fff;border-top:solid 0px #fff;
line-height:2.8rem;
height:2.8rem;
text-align:center;
background-color: transparent;
}

#menua {
color:#E7FECB;	
}
#menu2 a:hover {
color:#fff;
background-color: transparent;
text-decoration:underline ;
}



#main{  height:500px;
background-image:url(images/bgin.jpg);background-repeat:no-repeat;
background-position:center top; background-color: transparent;
}



#inbox { text-align:justify;padding-top:40px;padding-bottom:30px;
font-size: 15px;line-height: 19px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
color:#b6b6b6;
background-color: transparent;
}


#navbox {color:#fff;font: normal 11px/15px verdana, sans-serif; padding-left: 10px;padding-right:0px;padding-top: 0px;
background-color: transparent;
border-right:solid 1px #fff;
border-left:solid 0px #fff;
width:120px;
vertical-align:top;
text-align:center;
}


#fussb {
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
font-size:14px;
 color: #f7f7f7;
height:100px;
text-align:center;
vertical-align:middle;
padding-bottom:24px;
background-color: transparent;
background-image:url(images/fuss.jpg);
background-repeat:no-repeat;
background-position:top center;
padding-bottom:20px;
letter-spacing:3px;

}

#fussb2 {font-family: arial,georgia,verdana, sans-serif;
font-size:9px;
 color: #fff;
height:20px;
text-align:center;
vertical-align:middle;
font-style:italic;
background-color: transparent;
letter-spacing:3px;
background-image:url(images/fuss2.jpg);
background-repeat:repeat-y;
background-position:top center;

}



/* allgemeine links im text */

a:link, a:visited, a:active{ font-size: 15px;line-height: 19px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;color:#b6b6b6;text-decoration:underline;background-color: transparent;}

a:hover{ color:#fff;
background-color: transparent;text-decoration:none}

/* scrolleiste internet explorer ab vers.5.5 */

body
{scrollbar-arrow-color: #4a8203; scrollbar-base-color: #F5F8F3;
scrollbar-highlight-color : #4a8203; scrollbar-shadow-color : #ffffff;
SCROLLBAR-TRACK-COLOR: #e6e6e6;}


/* --- 1. DESKTOP-ANSICHT (Standard für grosse Bildschirme) --- */
.mein-menu {
  display: flex;
  flex-direction: row;       /* Erzwingt die Ausrichtung nebeneinander */
  justify-content: center; /* Schiebt das gesamte Menü nach rechts (Ändern zu 'center' für Mitte) */
  gap: 25px;                 /* Abstand zwischen den einzelnen Menüpunkten */
  padding: 15px 20px;
}

.mein-menu a {
  color: white;              /* Textfarbe der Links */
  text-decoration: none;     /* Entfernt den Unterstrich */
  font-size: 18px;
  font-family: sans-serif;
  white-space: nowrap;       /* Verhindert, dass ein Wort umbricht */
}

/* Hover-Effekt (Optional: Farbe ändert sich beim Drüberfahren) */
.mein-menu a:hover {
  color: #00bcd4;            
}


/* --- 2. MOBIL-ANSICHT (Greift automatisch beim Zusammenschieben) --- */
@media (max-width: 768px) {
  .mein-menu {
    flex-direction: column;  /* Schaltet auf Mobilgeräten untereinander */
    align-items: center;     /* Zentriert die Links untereinander */
    gap: 15px;               /* Etwas weniger Abstand auf dem Handy */
    padding: 20px 0;
  }

  .mein-menu a {
    width: 100%;             /* Nutzt die volle Breite für leichtere Klicks */
    text-align: center;
  }
}

/* Responsive Layout */
* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  margin:10px;
}

table {
  border-collapse: collapse;
}

@media (max-width: 768px) {
  body {
    margin: 0;
    overflow-x: hidden;
  }

  #aussen,
  #aussen > tbody > tr > td,
  #aussen table,
  #main2 {
    width: 100% !important;
    max-width: 100% !important;
  }

  #top1,
  #leiste {
    width: 100% !important;
  }

  #menu2 {
    width: 100% !important;
    display: flex;
  }

  #menu2 tbody,
  #menu2 tr {
    display: block;
    width: 100%;
  }

  #menu2 td {
    display: block;
    width: 100% !important;
    text-align: center;
    padding: 8px 0;
    border: 0;
  }

  .menutrenn {
    display: none;
  }

  #main2 > tbody > tr > td:first-child,
  #main2 > tbody > tr > td:nth-child(2) {
    display: none;
  }

  #inbox {
    width: 100% !important;
    display: block;
    padding: 10px
  }

  #fussb,
  #fussb2 {
    text-align: center;
    line-height: 1.6;
  }
}




/* ############################################################ */
/* M E D I A   Q U E R I E S - RESPONSIVE-BILDSCHIRMABFRAGEN */
/* ############################################################ */

/* ==================================== ab 320 pixel ================================== */


/* - - - - -  nur info - - - - - */
/*  f?r die kleinste smartphone-aufl?sung von 320pixel ben?tigen wir KEINE bildschirmabragen (media queries),
denn hierf?r gilt ja automtisch der gesamte vorstehende quelltext-code -
weil wir das template ja 'mobile-first' angelegt haben */



/* ==================================== ab 360 pixel ================================== */

@media (min-width: 360px) {

/* keine angabe */

}


/* ==================================== ab 480 pixel ================================== */

@media (min-width: 480px) {

/* keine angabe */

}


/* ==================================== ab 600 pixel ================================== */
@media (min-width: 600px) {


.hpname {
font-size:2.4rem;
line-height:2.4rem;
}

}


/* ==================================== ab 640 pixel ================================== */
@media (min-width: 640px) {

#menu2  a {text-decoration: none; }



}


/* ==================================== ab 768 pixel ================================== */
@media (min-width: 768px) {

html {font-size:70%;}


}


/* ==================================== ab 800 pixel ================================== */

@media (min-width: 800px) {

/* keine angabe */

}


/* ===================================== ab 1024 pixel ================================= */

@media (min-width: 1024px) {

/* keine angabe */

}


/* ===================================== ab 1100 pixel ================================= */

@media (min-width: 1100px) {

html { font-size:75%; }


}


/* ===================================== ab 1300 pixel ================================= */

@media (min-width: 1300px) {

}


/* ===================================== ab 1400 pixel ================================= */

@media (min-width: 1400px) {

html { font-size:80%; }

}