/* 
  globale Variable bereitstellen
*/
:root {
  --mein-grau: #dcdcdc;
  --mein-fastweiss: #f2f2f2;
  /*
   Farben
    #f2f2f2	sehr helles Grau (fast weiß)
    #e0e0e0	mildes, neutrales Grau
    #dcdcdc	klassisches "lightgray"
    #ccc	standardhelles Grau
    #fafafa	extrem hell, fast wie Papierweiß
    #555    dunkles Grau
  */
}

/* 
  Allgemeine HTML-Elemente 
*/
BODY {
	PADDING-LEFT: 10px; PADDING-RIGHT: 10px; FONT-SIZE: 80%; font-family : Tahoma; BACKGROUND-COLOR: #f2f6fa;
	/* padding-top: 60px; /* Platz für das fixe Menü oben */ */
}
FONT {
	FONT-FAMILY: Tahoma
}
SPAN {
	FONT-FAMILY: Tahoma
}
H1 {
	FONT-WEIGHT: bold; FONT-SIZE: 170%; COLOR: #7f97ae; LINE-HEIGHT: 1.8em; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #7DFF7D; TEXT-DECORATION: none
}
H2 {
	FONT-WEIGHT: bold; FONT-SIZE: 120%; COLOR: #3a566e; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #FFDB0F
}
H3 {
	FONT-WEIGHT: bold; FONT-SIZE: 110%; COLOR: #3a566e; FONT-FAMILY: Tahoma
}
H4 {
	FONT-WEIGHT: normal; FONT-SIZE: 100%; COLOR: #3a566e; FONT-FAMILY: Tahoma
}
LI {
	MARGIN-TOP: 2px; MARGIN-BOTTOM: 2px; 
	/* - Mit dem negativen Einrücken für <LI> wird das Einrücken von <UL> kleiner gemacht.
	   - Änderungen an der Formatierung von <UL> liefern im Firefox seltsame Ergebnisse.
	*/
	MARGIN-LEFT: -15px  
}
A:link {
	COLOR: #0000ff
}
A:visited {
	COLOR: #cc3399
}
A:hover {
	COLOR: #7f97ae
}
A:active {
	COLOR: #7f97ae
}
A:unknown {
	COLOR: #7f97ae
}
.frame_top_header {
	FONT-WEIGHT: bold; FONT-SIZE: 100%; COLOR: #7f97ae; LINE-HEIGHT: 1.8em; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #d3e2ef; TEXT-DECORATION: none
}
PRE {
	FONT-SIZE: 100%; FONT-FAMILY: Tahoma
}
TT {
	FONT-SIZE: 80%; FONT-FAMILY: Tahoma
}

/* 
  spezielle allgemeine HTML-Elemente 
*/
.seitenbreite {
    /* ist auch sehr viel benutzt */
    /* 950px sind gut für ein Tablet mit 1024er-Auflösung geeignet */
	width: 950px
}
.maxWebPageWitdh {
    /* 950px sind gut für ein Tablet mit 1024er-Auflösung geeignet 
       margin: 0 auto organisiert ein generelles "aligne: center", was es so nicht gibt
    */
	width: 950px; margin: 0 auto
}

/* 
  Größen und Darstellung von Bildern
*/
.img-border-radius {
	margin: 5px; border: 2px solid black; border-radius: 10px;
}
/* Nur diese benutzen. Das Rendern im Browser erkennt die echte Größe selbst. /*
/* kleine Bilder landscape */
.img-l-200 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 200px;
}
.img-l-250 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 250px;
}
.img-l-300 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 300px;
}
.img-l-400 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 400px;
}
.img-l-4to3-200 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 200px; height: 150px;
}
.img-l-4to3-300 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 300px; height: 225px;
}
/* kleine Bilder portrait */
.img-p-200 {
	margin: 5px; border: 2px solid black; border-radius: 10px; height: 200px;
}
.img-p-250 {
	margin: 5px; border: 2px solid black; border-radius: 10px; height: 250px;
}
.img-p-300 {
	margin: 5px; border: 2px solid black; border-radius: 10px; height: 300px;
}
.img-p-400 {
	margin: 5px; border: 2px solid black; border-radius: 10px; height: 400px;
}

/* !!! alte Formate: nicht mehr benutzen */
/* Christianes Bilder sind manchmal auch 7 zu 4 und manchmal 3 zu 2*/
.img-l-7to4-christiane-200 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 200px; height: 113px;
}
.img-l-3to2-christiane-200 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 200px;
}
.img-l-3to2-christiane-250 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 250px; height: 166px;
}
.img-l-christiane-300 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 300px; height: 200px;
}
.img-l-3to2-christiane-300 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 300px; height: 200px;
}
.img-l-4to3-400 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 400px; height: 300px;
}
.img-l-4to3-600 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 600px; height: 450px;
}
.img-l-16to9-200 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 200px; height: 112px;
}
.img-l-16to9-250 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 250px; height: 140px;
}
.img-l-16to9-300 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 300px; height: 168px;
}
.img-l-16to9-400 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 400px; height: 224px;
}
.img-p-4to3-200 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 150px; height: 200px;
}
.img-p-4to3-300 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 225px; height: 300px;
}
.img-p-7to4-christiane-200 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 113px; height: 200px;
}
/* Christiane */
.img-p-3to2-christiane-200 {
	margin: 5px; border: 2px solid black; border-radius: 10px; height: 200px;
}
.img-p-3to2-christiane-250 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 167px; height: 250px;
}
.img-p-4to3-400 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 300px; height: 400px;
}
.img-l-3to2-250 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 250px; height: 167px;
}
.img-p-16to9-200 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 112px; height: 200px;
}
.img-p-16to9-250 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 140px; height: 250px;
}
.img-p-16to9-300 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 168px; height: 300px;
}
.img-p-16to9-400 {
	margin: 5px; border: 2px solid black; border-radius: 10px; width: 224px; height: 400px;
}

/*
  Menü
*/
.top-menu {
  position: relative; /* fixed - immer sichtbar */
  height: 28px;
  /* width: 100%; /* nicht notwendig, sicher Standard*/
  color: black;
  background-color: var(--mein-grau); /* #dcdcdc; */
  display: flex;
  justify-content: space-around; /* kleiner Freiraum oben, unten, links, rechts zwischen Elementen */
  border-radius: 5px;
  z-index: 1000;
}

.menu-column {
  position: absolute; /*relative;*/
  top: 4px; /* kleiner Abstand zum Rand von .top_menu */
  /* left wird im JS definiert */
  width: 85px;
  padding: 0 5px; /* 0 oben,unten 5 links,rechts */
  cursor: pointer; /* Maus ist auch ohne Link darunter eine Hand mit zeigendem Finger */
  border: 2px solid #999;
  border-radius: 5px;
}

.menu-column:hover .dropdown {
  display: block;
}

/* color von oben vererbt
.menu-title { color: black; }
*/

.dropdown {
  display: none;
  position: absolute;
  top: 17px;
  left: 0;
  background-color: #dcdcdc; /* wird nicht von oben vererbt */
  /*max-width, min-width nicht notwendig. Größe passt sich maximaler Textlänge an. */
  white-space: nowrap;      /* verhindert Zeilenumbruch */
  overflow: visible;         /* hidden verhindert, dass der Text überläuft / visible erlaubt das .submenu neben dem .dropdown*/
  text-overflow: ellipsis;  /* zeigt "…" an, wenn der Text abgeschnitten wird */
  z-index: 1000;
}

.dropdown a {
  display: block;
  padding: 5px 10px; /* Abstand der Listenelemente */
}

.dropdown a:link {
  color: black; /* Farbe muss mit a:link überschrieben werden. Im reinen a hat a:link von oben Vorrang. */
  text-decoration: none; /* Notwendig, wenn kein underline für Links sein soll. */
}

.dropdown a:visited {
  color: black; /* Farbe muss mit a:visited überschrieben werden. Im reinen a hat a:visited von oben Vorrang. */
  text-decoration: none; /* Notwendig, wenn kein underline für Links sein soll. */
}

.dropdown a:hover {
  background-color: var(--mein-fastweiss);
}

.has-submenu {
  position: relative;
}

.submenu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%; /* rechts vom Elternelement */
  color: black;
  background-color: var(--mein-grau); /* wird nicht von oben vererbt */
  white-space: nowrap;       /* verhindert Zeilenumbruch */
  overflow: hidden;          /* hidden verhindert, dass der Text überläuft / visible */
  text-overflow: ellipsis;   /* zeigt "…" an, wenn der Text abgeschnitten wird */
  z-index: 1000;
}

.has-submenu:hover .submenu {
  display: block;
}