img.rahmen-2 {
    padding: 1em;
    border: 1px solid #ff0000
  };

.FloatToRightSide
{
float: right;
margin: 0 0 10px 10px;
border: 1px solid #222000;
padding: 2px;
}
.FloatToRightSide2
{
float: right;
margin: 10px 10px 10px 10px;
border: 1px solid #E6B873;
padding: 8px;
font-size: 0.8em;
}

.FloatToLeftSide
{
display: block;    
float: left;
border: 1px solid #E6B873;
margin: 10px 10px 10px 10px;
padding: 8px;
font-size: 0.8em;
 max-width: 100%;    
}

/* Stil für das Bild mit eckigem Rahmen */
.artikel-bild {
  display: block;           /* Bild steht allein in einer Zeile */
  margin: 20px auto;        /* 20px Abstand oben/unten, automatisch zentriert */
  font-size: 0.8em;  
  max-width: 100%;          /* Passt sich bei Handys an */
  height: auto;             /* Verhältnis bleibt korrekt */
  
  /* Der eckige Rahmen */
  border: 1px solid #E6B873;   /* 5 Pixel breit, durchgezogen, dunkelgrau */
  padding: 8px;             /* Kleiner Abstand zwischen Bild und Rahmen */
  
  
  /* Eckige Kanten erzwingen (Standard, aber zur Sicherheit) */
  border-radius: 0; 
}


.bild-mit-rahmen {
  /* Positionierung der gesamten Box */
  display: table;           /* Trick: Die Box schrumpft auf die Breite des Bildes */
  margin: 20px auto;        /* 20px Abstand oben/unten, automatisch zentriert */
  max-width: 100%;          /* Damit es auf Handys nicht übersteht */
  
  /* Der Rahmen (jetzt um die ganze Box herum) */
  border: 1px solid #E6B873;   
  background-color: #f9f9f9; /* Optional: leichte Hintergrundfarbe für die Box */
  padding: 5px;             /* Etwas Luft zwischen Rahmen und Inhalt */
  box-sizing: border-box;   
}

.bild-mit-rahmen img {
  /* Das Bild innerhalb der Box */
  display: block;
  max-width: 100%;          /* Bild passt sich der Box an */
  height: auto;
  margin-bottom: 5px;       /* Kleiner Abstand zur Unterschrift */
}

.bild-mit-rahmen figcaption {
  /* Die Bildunterschrift */
  text-align: center;       /* Text mittig unter dem Bild */
  font-size: 0.8em;         /* Schrift etwas kleiner als normaler Text */
  color: #555;              /* Schriftfarbe etwas heller (dunkelgrau) */
  font-style: italic;       /* Optional: Text kursiv */
  padding: 5px;             /* Etwas Luft zum Atmen */
}











.style1 {
	text-align: right;
}

.style2 {
	text-align: center;
}

/*mouseover fuer text*/

a.box
{
background-color: #D48A44;
color: #173C93;
font-size: 13px;
padding: 3px;
text-decoration: underline
}
a.box:hover
{
cursor: help;
background-color: #E6B873;
color: #173C93
}
a.box span
{
position: absolute;
visibility: hidden;
margin-left: ´20px;
margin-top: -20px;
padding: 8px;
text-decoration: underline
}
a.box:hover span
{
visibility: visible;
border: 3px solid #000;
color: #000;
background-color: #D48A44
}

a.box2
{
background-color: #D48A44;
color: #173C93;
font-size: 15px;
padding: 3px;
text-decoration: underline
}
a.box2:hover
{
cursor: help;
background-color: #E6B873;
color: #173C93
}
a.box2 span
{
position: absolute;
visibility: hidden;
margin-left: ´20px;
margin-top: -20px;
padding: 8px;
text-decoration: underline
}
a.box2:hover span
{
visibility: visible;
border: 3px solid #000;
color: #000;
background-color: #D48A44
}





/*mouseover fuer imagemap*/

a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center}
	
	
	
	
	img.skaliere
{
max-width: 200%;
height: auto;
}