* {
    padding: 0;
    margin: 0;
}

html, body {
    font-family: arial, sans-serif;
    font-size: 100%;
}

body {
    text-align: center;
    background-image: url(images_rabecon/raben_web.jpg);
}

#wrapping {
    text-align: left;
    max-width: 900px;
    /*min-height: 1500px;*/
    margin: 0 auto;
}

header {
    background-image: url(images_rabecon/www_rabecon_de_bannerI.jpg);
    background-repeat: no-repeat;
    background-position: calc(70%);
    height: 150px;
    margin-bottom: 1cm;
}

header p {
    color: #e92d2d;
    text-align: left;
    vertical-align: text-bottom;
    font-weight: bold;
    font-size: 2em;
    padding: 10px 40px 0 0;
}

nav {
    width: 234px;
    float: left;
    margin-left: 30px;
}

nav ul {
    list-style-type: none;    
    color:#e92d2d;  /* damit Aufzählungszeichen rot angezeigt werden */
   
}

nav li {
    line-height: 40px;
    margin-top: 1.0em;
    /*background-image: url(images_rabecon/rabe_metall_webII.jpg);
    background-repeat: no-repeat;*/
    background-position: top;
    text-align: left;
}

nav ul ul {
   
    list-style-type: square;
    padding-left: 1.5em;
    margin-bottom: 1em;
}

/*nav ul ul li:first-child {
	background-color: green;
	 Gegenarbeiten zu nav li { margin-top: 1.3em;
    margin-top: 0.4em;
}*/


nav a {
    color:black;
    background-image: url(images_rabecon/rabe_metall_webII.jpg);
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    text-decoration: none;
	width: 100%;
	display: inline-block;
	line-height: 1.4em;

	/*  sonst Breite nicht sinnvoll handelbar  */
	box-sizing: border-box;  

	/*  wird erst beim hervorheben der aktiven Zeile benötigt  */
	padding-left: 6px;    
	padding-right: 20px;
}

nav li.aktiv a {
    color: #e92d2d;
    background-image:url(images_rabecon/rabe_metall_webII.jpg);
    background-repeat: no-repeat;
    background-position: center;
    text-align: center; 
	/*	keine Unterstreichung, dass es nicht nach Link aussieht */
	text-decoration: none;
	/*	Cursor normal, dass es nicht nach Link aussieht */
    cursor: default;
   /* border: #e92d2d 1px solid;*/
}

nav a:hover {
    color: #e92d2d;
    text-decoration: underline;
}

/*NOCHMALS TESTEN, WAR DURCH NACHFOLGENDE DEF article ERSETZT WORDEN!*/
article {
    margin: 20px 40px 30px 320px;
}

/*article {
 padding: 2rem 1rem;
 max-width: 1000px;
 margin: 0;
}*/


article h1,
article h2,
article h3
{
    color: #e92d2d;
}

article p {
    color: black;
    padding-bottom: 1em;
    line-height: 1.7em;
}


figure {
	background-color: #eee;
	display: inline-block;
	padding: 10px;
	border: silver 1px solid;
	float: right;
	margin: 0.4em 0 0.4em 1em;
}

figcaption {
	font-size: 80%;
	text-align: center;
	font-style: italic;
}

.bildlinks {
	float: left;
	margin: 0.4em 1em 0.4em 0;
}


article ul {
    color: #e92d2d;
    list-style-type: circle;
    padding-left: 1.4em;
    line-height: 1.7em;
	margin-bottom: 2em;
}

article ul ul {
    color: #e92d2d;
    list-style-type: square;
    padding-left: 1.4em;
    margin-bottom: 0em;
}

table {
	width: 100%;
    border: silver 1px solid;
    border-collapse: collapse;
	margin-bottom: 2em;
}

table thead {
    background-color: coral;
    color: white;
}

table th,
table td {
    padding: 4px 6px;
	border-right: white 1px solid;
}

tbody tr:nth-child(even) {background: #ccc}
tbody tr:nth-child(odd) {background: #fff}

th:last-child,
td:last-child { 
	border: silver 1px solid; 
}

tbody tr:hover {
	background-color: hsla(50, 20%, 50%, 0.6);
	cursor: default;
}


dl {
/*	background-color: yellow;*/
	margin-top: 1em;
	margin-bottom: 2em;
}

dt {
/*	background-color: orange;*/
	display: inline-block;
	float: left;
	font-weight: bold;
	max-width: 155px;
/*	color: coral;*/
}

dd {
/*	background-color: lime;*/
	margin-left: 160px;
	margin-bottom: 0.5em;
}

dl div {
/*	background-color: red;*/
	clear: both;
	margin-bottom: 1em;
	border: 0;
}



footer {
    background-color: black;
	text-align: center;
    clear:both;
	line-height: 2em;
	color: silver;
	font-size: 80%;
}

footer a {
	color: silver;
	text-decoration: none;
}

.fly-in-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/*.fly-in-list li {
  opacity: 0;
  transform: translateX(-30px);
  animation: flyIn 0.6s ease-out forwards;
  animation-delay: var(--delay);
  margin-bottom: 1rem;
  font-size: 1.1em;
  line-height: 1.4;
  text-align: center
}*/

.fly-in-list li {
  opacity: 1;
}
.fly-text {
    /*display:inline-block;*/
    opacity: 0;
    transform: translateX(-30px);
    animation: flyIn 0.6s ease-out forwards;
    animation-delay: var(--delay);
    margin-bottom: 1rem;
    font-size: 1.1em;
    line-height: 1.4;
    text-align: center
}

/* Gestufte Einrückung */
.level-1 { padding-left: 25px; }
.level-2 { padding-left: 50px; }
.level-3 { padding-left: 100px; }
.level-4 { padding-left: 150px; }
.level-5 { padding-left: 200px; }

@keyframes flyIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/*.verzoegerter-text {
    opacity: 0; /* Startet unsichtbar */
  /*  animation: fadeIn 1s ease-in forwards;
    /*animation-delay: 3s; /* Verzögerung um 3 Sekunden */
  }
   @keyframes fadeIn {
    to {
      opacity: 1; /* Endzustand: sichtbar */
    }
  }