:root {
/* eigene Variablen: */
  --site-width: 770px; /* Breite der Site */
  --header-height: 180px; 
  --main-color: blue;
  --horizontal-top: 488px;  /* Position der horizontalen Linie vom oberen Rand*/
  --vertical-length: 415px; /* Länge der vertikalen Linie */
  --white-box-height: 365px; /* Länge der Fläche */
}

body
{
   background-color: #F4F4F4;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 11px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;

   /* width: 600px; */ /*die Breite für die Seite*/
}

.white-box {
    position: absolute;  /* Absolute Positionierung */
    background-color: white;  /* Weiße Hintergrundfarbe */
    width: var(--site-width);  /* Breite der Fläche */
    height: var(--white-box-height);  /* Höhe der Fläche */
    top: var(--header-height);  /* vertikaler Anschluss an Header */
    left: 0px;  /* Abstand vom linken Rand des Viewports */
    z-index: 0;  /* Z-index, damit die Flächen über anderen Elementen liegen */
}
a.style1
{
   color: #666666;
   text-decoration: none;
}
a.style1:visited
{
   color: #666666;
   text-decoration: none;
}
a.style1:active
{
   color: #666666;
   text-decoration: none;
}
a.style1:hover
{
   color: #0000FF;
   font-weight: bold;
   text-decoration: none;
}
a.style2
{
   color: #7F7F7F;
   text-decoration: none;
}
a.style2:visited
{
   color: #666666;
   text-decoration: none;
}
a.style2:active
{
   color: #666666;
   text-decoration: none;
}
a.style2:hover
{
   color: #0000FF;
   text-decoration: underline;
}
a.style3
{
   color: #7F7F7F;
   font-weight: bold;
   text-decoration: none;
   font-size: 12px;
}
a.style3:visited
{
   color: #7F7F7F;
   font-weight: bold;
   text-decoration: none;
}
a.style3:active
{
   color: #7F7F7F;
   background: #C0C0C0;
   font-weight: bold;
   text-decoration: none;
}
a.style3:hover
{
   color: #7F7F7F;
   background: #E6E6FA;
   font-weight: bold;
   text-decoration: none;
}
a.style4
{
   color: #0000FF;
   text-decoration: underline;
}
a.style4:visited
{
   color: #0000FF;
   text-decoration: underline;
}
a.style4:active
{
   color: #0000FF;
   text-decoration: underline;
}
a.style4:hover
{
   color: #0000FF;
   text-decoration: underline;
}
h1, .h1
{
   font-family: Arial;
   font-weight: bold;
   font-size: 32px;
   text-decoration: none;
   color: #000000;
   background-color: transparent;
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   display: inline;
}
h2, .h2
{
   font-family: Arial;
   font-weight: bold;
   font-size: 19px;
   text-decoration: none;
   color: #C0C0C0;
   background-color: transparent;
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   display: inline;
}

.menu-iframe {
	width: 90px; /* Breite des iframes */
	height: 200px; /* Höhe des iframes, passend zum Menüinhalt */
	border: none; /* Kein Rahmen */
	position: relative; 
	top: 300;
	left: 0; /* Positioniert das Menü links */
	z-index: 35; /* Hält das Menü oben über anderen Elementen */
}
.content {
	padding-top: 70px; /* Abstand zum Menü, damit der Inhalt nicht darunter liegt */
}
.visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
}

.horizontal-line {
	position: absolute; /* Positionierung ist notwendig für z-index */
	z-index: 30;      /* Sehr hoher z-index, um sicherzustellen, dass die Linie oben liegt */
	height: 6px;
	width: 688px;
	background-color: var(--main-color); /* Farbe der Linie */
	margin: 20px 0;
	left: 58px;
	top: var(--horizontal-top);
	border-radius: 8px;
	border: none;
}

.vertical-line {
	position: absolute; /* Positioniert die Linie im Viewport */
	left: 117px;
    top: calc(var(--header-height) - 40px);
	z-index: 30;   /* Höherer z-index, um sicherzustellen, dass die Linie oben liegt */
	height: var(--vertical-length);    /* Höhe auf 100% des Viewports setzen */
	width: 6px;      /* Dicke der Linie */
	background-color: var(--main-color); /* Farbe der Linie */
	border-radius: 8px; /* Abrundung der Enden */
	border: none; /* Entfernt die standardmäßige Umrandung */
}

.external-link a {
   font-size:16px;
   color: #666666;
   text-decoration: none;
}

/* Individueller Hover-Effekt für jeden Link */
.external-link a:hover {
   color: #0000FF;
   font-weight: bold;
   text-decoration: none;
}