/* Link-Liste vertikal - ggf. beliebige Länge mit "lili height:24em (z.B.); und overflow:auto;" */
#lili					{width:20em; height:23em; border:0.2em ridge #abc; border-radius:0.7em; box-shadow:0.4em 0.4em 2em #000; float:left;}
#lili:hover				{border-color:red; box-shadow:0 0 2em #0f0;}
#lili a					{display:block; line-height:2.43em; font-weight:bold; font-size:1em; color:#060; background:#ffa; text-align:center; text-decoration:none; border-bottom:0.1em solid #bbb; transition: all 0.3s linear;}
#lili a:visited			{color:#060;}
#lili a:focus			{color:#ff0; background:#9a3;}
#lili a:hover			{color:#ff0; background:#9a3; text-shadow:0.1em 0 0.1em #000;}
#lili a:active			{color:#ff0; background:#4f5;}
#lili a:first-child		{border-top-left-radius:0.5em; border-top-right-radius:0.5em;}
#lili a:last-child		{border-bottom-left-radius:0.5em; border-bottom-right-radius:0.5em; border:none;}

/* Bilderrahmen - verknüpft mit Link-Container - Bildgröße: 576px x 320.6px = 36em x 20.1em, also ungefähr: 576 x 321 Pixel (Verhältnis: 1600 x 900). */
#rahmen					{float:right; width:37em; height:22.5em; text-align:center; border:0.2em ridge #abc; border-radius:0.7em; box-shadow:0.4em 0.4em 2em #000; background:#fff; padding-top:0.5em;}		/* Höhe war: 22.2em ! */
#rahmen:hover			{border-color:red; box-shadow:0 0 2em #0f0;}
#rahmen:hover img		{box-shadow:none;}
#container				{position:relative;}
#container img			{width:36em; height:20.1em; border-radius:0.5em;}
a.link span 			{visibility:hidden; position:absolute; top:-50em; right:0; width:37em; height:22.5em; border:0.2em ridge #abc; border-radius:0.7em; background:#fff; padding-top:0.5em; transition:all 1s;}
a.link:hover span		{visibility:visible;top:0;}
.text					{font-weight:bold; color:#f80; text-shadow:0 0; padding-top:0.6em;}

/* bei "a.link span" statt "display:none;" verwendet: "visibility:hidden;" */
/* bei "a.link:hover span" statt "display:block;" verwendet: "visibility:visible;" */
/* ...verändern: "transform:scale(2);" = vergrößern, "transform:translate(100px, 20px);" = verschieben, "transition-delay:0s;" = verzögern, "transition:visibility 0s linear 0.3s, opacity 0.3s linear;" = kombinieren */

#pano					{width:99.2%; height:14.5em; box-shadow:0.4em 0.4em 2em #000; border:0.2em ridge #abc; overflow:auto; overflow-y:hidden; text-align:center;}

/* Ende (Fussbereich) */
#ende					{width:62em; margin:1% 0; height:2em; border:0.2em ridge #abc; border-radius:1em; background:#ffd; box-shadow:0 0 1em #0f0;}
#ende a					{display:block; text-align:center; text-decoration:none; font:bold 1em/2em Arial, sans-serif; color:#070; transition: all 0.3s;}
#ende a:visited			{color:#060;}
#ende a:focus			{color:#ff0; background:#9a3;}
#ende a:hover			{color:#ff0; background:#9a3; text-shadow:0.1em 0 0.1em #000;}
#ende a:active			{color:#ff0; background:#4f5;}
.feldl					{float:left; width:12.4em; border-right:1px solid #abc; border-top-left-radius:0.7em; border-bottom-left-radius:0.7em;}
.feldm					{float:left; width:12.5em; border-right:1px solid #abc;}
.feldr					{border-top-right-radius:0.7em; border-bottom-right-radius:0.7em; overflow:hidden;}