/* Die-welt-der-schuhge.de 15.02.2026 */

body            {margin:0px;
font-family: Arial,Verdana,Verdana,Tahoma,  Helvetica; 
font-size: 14px; 
line-height: 20px; 
font-weight: normal;
letter-spacing:0pt;
}

.PageMaster
{
font-family: Arial,Verdana,Helvetica;
height: 100%;
width: 800px;
background-color: #ffffff;
}

/* Control Panel Colors */

.controlpanel
{
background-color: #EAEAEA;
}


/* --  Classes for the top of the montage & to allow everything
   to line up nicely when not logged in  -- */

.HeaderTab
{
background-image: url(Pix/FrontPaneTopNew.jpg);
width: 100%;
height: 90px;
background-repeat: no-repeat;
}

.MenuTab
{
background-color: #808080;
width: 100%;
height: 12px;
margin-left: 15px;
padding-left: 15px;
border-left: 15px;
background-repeat: no-repeat;
}

.IntroPane
{
background-image: url(Pix/FrontPaneIntroPaneLeft.jpg);
width: 365px;
height: 100px;
background-repeat: no-repeat;
}

.TopPane
{
margin-top: 4px;
margin-left: 2px;
}

.LeftPane
{ white-space:nowrap; }

.TopIntroPane
{
width: 350px;
margin-top: 4px;
margin-left: 2px;
}

.Intro
{
width: 365px;
height: 150px;
padding-top: 95px;
padding-left: 2px;
}

.Logo
{
padding-top: 5px;
padding-left: 5px;
}

 
.SiteHeaderTab
{
background-image: url(Pix/PortalSiteBanner.png);
width: 100%;
height: 130px;
background-repeat: no-repeat;

}
.SiteHeaderTab12
{
width: 100%;
height: 100px;
}
 
.Panes
{
padding: 10px 2px 2px 2px;
font-size:  26px;
}
 

.Head
{

font-size:  12px;
font-weight: bold;
color: #333333;
}
 
.Breadcrumbs
{
color: #000000;
}

.Block
{
width: 13px;
}

.Login
{
color: #333333; 

font-size: 9px; 
font-weight: bold; 
font-style: normal;
height: 30px;
color: #000000;
text-align: left;
}

.menuclick      {margin-top:9px;}
#sdBanner       {width:100%; height:816px; background-image: url('images/top-banner.png') ; background-repeat: no-repeat;}
.sdMarginTop    {margin-top:15px;}
.sdBannerArrow  {width:85px; margin-top:70px; margin-left:auto; margin-right:auto;}
#sdmenue        {display:block; z-index:100; width:100%; min-height:54px; height:auto; background-color:#ffffff; }
#sdContent      {background-color:#efefef; }
#sdmenue.fixed  {position:fixed; top:0px; z-index: 100;}

.dnnEditState #sdmenue, 
.dnnEditState #sdmenue.fixed {
    z-index: 10 !important; 
    position: relative !important; /* Verhindert, dass das Menü beim Scrollen die Buttons überdeckt */
}


.sdContent-Width{width:100%; max-width:980px; margin-left:auto; margin-right:auto;}
.sdMenu-Width{width:100%; max-width:980px; margin-left:auto; margin-right:auto;}
.sdTwo-Thirds, .sdOne-Third {width:100%;}
.sdOne-Fourth, .sdTwo_Fourths {width:100%;}
.sdFullSizeBanner{margin-top:70px;}
.sdThreeThirds  {width:100%; margin-bottom:60px;}
#sdFooter       {width:100%; margin-top:100px; border-top:0px dashed #000; border-bottom:0px dashed #000;background-color:#666666; }
#sdFooterLogo, .sdFooterRowA, .sdFooterRowB {width:100%;}
#sdCopyRight    {border-bottom:1px dashed #000; margin-bottom:10px;background-color:#444444; }
#sdCopyRight .sdContent-Width ul li {float:left; padding-right:18px; list-style-type:none;}
#sdCopyRight .sdContent-Width ul {float:right; margin-top:17px;}
article {margin-bottom:70px;}

.RahmenUnten {border-bottom:1px solid #666;margin-bottom:35px;}


/** DNN **/
#dnn_dnnLOGOFooter_hypLogo img  {width:70%; margin-top:50px; margin-bottom:30px; padding-left:15%;}
#dnn_dnnLOGOMenue_hypLogo img {float:left; height:32px; width:auto; margin-top:8px; padding-left:2%;}
#sdBF {color:#000; text-decoration:none;}

/** Form **/
.ScrolltasticForm {margin-bottom:30px;}
.ScrolltasticForm .primaryButton {background-color:#ddd; border:1px solid #c8c8c8; padding:8px 10px 8px 10px; margin-top:20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
.ScrolltasticForm .primaryButton:hover {background-color:#cccccc; border:1px solid #919191; margin-left:8px;}
.ScrolltasticForm label    {display:block;}
.ScrolltasticForm input    {display:block; width:100%; margin-bottom:15px; padding:2.5%; border:1px solid #919191;}
.ScrolltasticForm textarea {display:block; width:100%; padding:2.5%; border:1px solid #919191;}

/** SHD **/
.sdClr {clear:both;}
#sdMarginOff {margin:0%;}
img {max-width:100%;}
.sdFixed {position:fixed;}


/** TAB */
@media all and (min-width: 499px) 
{
#dnn_dnnLOGOFooter_hypLogo img  {width:50%; margin-top:60px; padding-left:25%;}
#dnn_dnnLOGOMenue_hypLogo img {height:78px; padding-left:0%; margin-top:6px;}
}

/** DESKTOP */
@media all and (min-width: 799px) 
{
.sdTwo-Fourths   {width:48%; float:left; margin-right:2%;}
.sdOne-Fourth    {width:24%; float:left;}
.sdTwo-Thirds    {width:980px; }
.sdOne-Third     {width:0px; }
.sdFullSizeBanner{margin-top:150px;}
.sdThreeThirds  {width:30%; margin-right:5%; margin-bottom:0px; float:left;}
.sdBannerArrow {width:85px; margin-top:200px; margin-left:auto; margin-right:auto;}
#sdFooterLogo, .sdFooterRowA, .sdFooterRowB {width:28%; margin-right:8%; float:left;}

#dnn_dnnLOGOFooter_hypLogo img  {width:70%; margin-top:70px; float:left;}
.sdFooterRowB {margin:0%;}

.ScrolltasticForm input    {display:block; width:98%; margin-bottom:15px; padding:1%;}
.ScrolltasticForm textarea {display:block; width:98%; padding:1%;}

#megaMenu .category li.item a{ border:none; padding:0 10px; background:url(../images/mega_sub_bottom.png) no-repeat left bottom; white-space:normal; }
#megaMenu .category li.item a span{ display:block; background:none; font-size:13px; color:#535353; font-weight:bold; height:auto; line-height:26px; padding:0; text-transform:none; }
#megaMenu .category li.item a:hover span, #megaMenu .category li.selected a span { background:none; color:#000; cursor:pointer; }
#megaMenu .category li.item a:hover {text-decoration: underline}


}


.sdMenue-Width  {width:92%; max-width:1130px; margin-left:auto; margin-right:auto;}
}

.tablepaneRahmenOben {
    
border-top: 1px dotted;
border-right: 0px solid;
border-bottom: 0px solid;
border-left: 0px solid;
       }

@media all and (min-width: 499px) 
{
.tablepaneRahmenOben {
border-top: 1px dotted;
border-right: 0px solid;
border-bottom: 0px solid;
border-left: 0px solid;
        }



}


/** 
 * Style rules for Megamenu
 */


.scontainer-2,.scontainer-3,.scontainer-4 { font-size: 80%; background: #eeeeee;border: 0px solid #222222;}

/* COLUMNS */
.scol1 { width:100%; margin: 5px 0; float: none; padding: 0 5px;}


.scol1 ul { padding-left: 0px }
.scol1 h3 {line-height: 18px }

.scol1 h5 {color: #000000; 
font-family: arial,helvetica,sans-serif;
font-size: 14px;
line-height: 16px;
font-weight:bold; 
padding: 10px 0px 7px 0px;
margin: 15px 0px 0px 0px;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}

.scol1 a:link { color: #000000; 
font-family: arial,helvetica,sans-serif;
font-size: 12px;
line-height: 20px;
font-style: normal;
text-decoration: none;
 }
.scol1 a:visited { color: #000000; 
font-family: arial,helvetica,sans-serif;
font-size: 12px;
line-height: 20px;
font-style: normal;
text-decoration: none;
 }


.scol1 a:hover {  text-decoration:    underline; }
	

/* 4 Column */

.scontainer-2,.scontainer-3,.scontainer-4 { width: 260px; }
.scontainer-2 .scol1,.scontainer-3 .scol1,.scontainer-4 .scol1 { width: 250px; }

/** DESKTOP */

@media all and (min-width: 799px) 
{
        .scol1 { width: 180px; float: left;}
	.scontainer-2 { width: 450px; }
        .scontainer-3 { width: 600px; }
	.scontainer-4 { width: 682px; }
        .scontainer-2 .scol1 { width: 180px; float: left; }
        .scontainer-3 .scol1 { width: 180px; float: left; }
	.scontainer-4 .scol1 { width: 160px; float: left; }
}
	

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;}




.footermenu
{
	width:100%;float:left;background-color:#666666;padding-left:10px;padding-top:20px;position:relative;z-index:99;
}


.FooterMenuLink
{
        font-size: 16px; 
        line-height: 20px;
        border-style: solid;
	border-color: red;
	border-width: 0px;
 }


.FooterMenuLink A, .FooterMenuLink .FooterMenuLink A:Visited, .FooterMenuLink A:Link
{
  font-size: 16px;font-weight: normal;
  text-decoration: none; color: #ffffff; 
  line-height: 30px;
  }

.FooterMenuLink A:Hover
{
  color:  #ff0000;
}
.FooterMenuLink A:Visited
{
  color:  #fff;
}


.FooterMenuLink h3
{
  color:  #ffffff;
}

@media all and (min-width: 799px) 
{
.footermenu {height: 540px;width:180px;padding-top:5px}
.FooterMenuLink A, .FooterMenuLink .FooterMenuLink A:Visited, .FooterMenuLink A:Link
{font-size: 12px;line-height: 14px;}
}


/** aus altemDESKTOP  für dukas fotoshow*/

.galleria{list-style:none;width:200px}
.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 10px 10px 0}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:400px} /* MSIE bug */



	
#folders_container,
#bottom_container,
#top_container {
	border-width: 0px;	
}
	
#right_arrow,
#left_arrow,
#right_fast_arrow,
#left_fast_arrow {
	height: 40px;
	width: 20px;
}

#right_fast_arrow,
#left_fast_arrow {
	margin: 0 20px;
}

#bottom_container {
	margin-top: 30px;
}
	
#main_image .loader,
#main_image img {
	border: solid 3px #ababab;
}
	
#extras {
	border: solid 1px #ababab;
	margin: 10px auto;		
	padding: 5px;
}

#extras ul li {
	border-left-color: #333333;
}

#bottom_container {
	border-top-color: #ababab;	
}

#folders_container,
#top_container {
	border-bottom-color: #ababab;
}

.description {
	color: #666666;
}

.caption {
	color: #666666;
}

.thumbnails li {
	margin: 0 10px 10px 0;	
	border: none 3px #ababab;
	background-color: #ffffff;
}

.thumbnails li.active {
  border: solid 3px #ababab;
}

.folders li a {
	background-color: #ffffff;
	border-style: double;
	border-width: 3px;
	border-color: #ababab;
	margin-right: 10px;				
	height: 80px; 
	width: 40px;
}

#slideshow {
	font-size:0.8em;	
}

.description {
	margin: 10px auto;
}

.caption {
	display: block;
	margin: 10px auto;
	font-size: 12px;
}

#main {
	position: relative;
}

#main_image .loader {
	margin:  auto;
}

#main_image .loader img {
	margin:  auto;
	border: none;	
}

#middle_container {
	margin:  auto;
	position: relative;
}

#single_image {
	position: relative;	
}

#left_arrow,
#right_arrow,
#left_fast_arrow,
#right_fast_arrow {
	float:left;
	cursor: pointer;
	-ms-interpolation-mode: bicubic;
}

#scroller_container {
	margin: auto;
	position: relative;
}

#image_scroller {
	position: relative;
	margin: auto;
	float:left;
	overflow: hidden;
}

.thumbnails {
	left: 0;
	margin: 0;
	padding: 0;
	top: 0;
	position: absolute;
}

#top_container {
	padding-bottom: 6px;
	border-bottom-style: solid;
	margin: 0 0 10px 0;
}

#bottom_container {
	margin: 0;
	padding: 6px 0;
	border-top-style: solid;
	width: 100%;
	text-align: center;
	display: block;
	font-size: 0.8em;
}

#folders_container {
	border-bottom-style: solid;
	margin-bottom: 20px;
} 

.folders {
	margin: 0px auto;
	padding: 0;
}

.folders li {
	float: left;
	display: inline;
}

.folders li a {
	display: block;
	position: relative;		
	overflow: hidden;
}


.folders li a span {
	position: absolute;
	left: 0;
	top: 0;	
	opacity: 0.7;
   	filter:alpha(opacity=70);
       	padding: 4px;
	margin: 0;
	background-color: #000;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
	text-align: left;
}


.thumbnails li span {
	display:none;	
}

.thumbnails li img, 
.folders li a img {
	-ms-interpolation-mode: bicubic;
}

#extras {
	display: none;
	width: 280px;
	font-size: 10px;
}

#extras ul {
	margin: 0;
	padding: 0;
}

#extras ul li {
	display: inline;
	padding: 0 5px;
	border-left-width: 1px;
	border-left-style: solid;
	line-height: 16px;
}

#extras ul li.first {
	padding-left: 0px;
	border-left: none;
}



.clear {
	clear: both;
	width: 0px;
	height: 0px;
	line-height: 0px;
	font-size: 0px;	
}
.hide {
	display: none;
}

#demoFour a {
    display: block;
    text-align: center;
    width: 122px;
    border: 1px solid silver;
    padding: 5px;
    margin: 0 5px 7px 0;
    text-decoration: none;
    font-family: Arial,Verdana;
    font-size: 12px; }


#demoFour-nav ul, ol {
    margin-bottom: 18px;
    margin-left: 0px;}

#demoFour ul, ol {
    margin-bottom: 18px;
    margin-left: 0px;}

#demo ul, ol {
    margin-bottom: 18px;
    margin-left: 0px;}

.demo ul, ol {
    margin-bottom: 18px;
    margin-left: 0px;}




.DDRMenuMega1
{
	
}
.DDRMenuMega1 A,.DDRMenuMega1 A:link,.DDRMenuMega1 A:visited,.DDRMenuMega1 A:active
{
	text-decoration: none;
}
.DDRMenuMega1 .main_dnnmenu_bar 
{
	width: auto;
}
.DDRMenuMega1 .ddrmenulevel1
{
	background-color: white;
}
.DDRMenuMega1 A.ddrmenuitemlevel0
{	
	color: #375162;
	font-size: 13px; 
        font-family: Arial,Verdana, Arial, Helvetica, Sans-Serif;
	font-weight:bold; 	
	text-align:center; 
	padding:12px 12px 12px 12px;
	margin-right:1px;
border-top:0px solid #666666;
border-bottom:0px solid #666666;
}
.DDRMenuMega1 A.ddrmenuitemlevel0:hover
{  
	color:#ffffff;
	background-color:#375162;
	text-decoration:none;
}
.DDRMenuMega1 A.main_dnnmenu_rootitem_selected 
{
	color:#ffffff;
        background-color:#375162;
	
}
.DDRMenuMega1 .ddrmenu .ddrmenulevel1
{
	border:1px solid #C0D6E5;
}
.DDRMenuMega1 .ddrmenulevel1 A
{
	background-color:#F8FAFF;
	font-size: 11px; 
	font-weight:bold;
	text-align:left;
	color:#000000;
	line-height:2em;
	padding: 0px 5px;
	margin:0px;
}
.DDRMenuMega1 .ddrmenulevel2
{
	margin-left: 2em;
}
.DDRMenuMega1 A.ddrmenuitemlevel2
{
	font-weight: normal;
}
.DDRMenuMega1 .ddrmenulevel1 A:hover
{  
	
background-color:#375162;
	color:#ffffff;
	text-decoration:none;
}
.DDRMenuMega1 .ddrmenulevel1 .main_dnnmenu_itemselected 
{
	
background-color:#375162;
	color:#ffffff;
}













/*--------- MegaMenu all ----------*/

.mobile_display {display:none;}
.mobile_nav {display:none; float:right;}
.standard_nav {display:none; float:right;}
nav {position:relative;}
.root {float:right;}

/*--------- MegaMenu style ----------*/
#megaMenu { position:relative; margin:0 auto;}
#megaMenu ul { list-style:none; margin:0; padding:0 0 0 5px;}
#megaMenu li{ position:relative;display:block;float:left;list-style-type:none;z-index:903;}
#megaMenu li.back{background:url(../images/menu_tab.png) no-repeat left -62px;z-index:8;position:absolute; top:0;}
#megaMenu li.back .left{background:url(../images/menu_tab.png) no-repeat right 0;height:62px;width:100%; margin-left:8px;}
#megaMenu li.back .center{background:url(../images/menu_tab_light.png) no-repeat center 0;height:62px; margin-right:12px; margin-left:-4px; }

#megaMenu .root li a{ display:block;position:relative;float:none;z-index:10; color:#333333; white-space:nowrap; font-size:14px; font-weight:bold; text-transform:none; cursor:pointer;text-decoration:none;}
#megaMenu .root li.selected a, #megaMenu .root li.rmHover a, #megaMenu .root li.breadcrumb a, #megaMenu .root li:hover a, #megaMenu .root li a:hover {text-decoration:none;}
#megaMenu .root li a span {display:block; padding:0 10px; height:54px; line-height:54px;}

/*-- submenu --*/
#megaMenu .category li { clear:both;} /** SUBMENU vertical**/

#megaMenu .category { position:absolute;top:54px;z-index:1210; display:none; padding:0; padding:5px 10px 5px 10px; background:none; background-color:#f3f3f3; border:1px solid #d8d8d8; border-top:0px; border-radius: 12px; webkit-border-radius: 9px; -moz-border-radius: 9px; border-top-right-radius:0px; border-top-left-radius:0px;}
#megaMenu ul li:hover ul{ visibility: visible; }
#megaMenu .root li.rmHover .category { display:block;}
#megaMenu .category ul{ margin:0; padding:0; position:relative; z-index:1200; }
#megaMenu .category li{ width:250px; padding:0;}
#megaMenu .category li.item a{ border:none; padding:0 10px; background:url(../images/mega_sub_bottom.png) no-repeat left bottom; white-space:normal; }
#megaMenu .category li.item a span{ display:block; background:none; font-size:13px; color:#535353; font-weight:bold; height:auto; line-height:35px; padding:0; text-transform:none; }
#megaMenu .category li.item a:hover span, #megaMenu .category li.selected a span { background:none; color:#000; cursor:pointer; }

#megaMenu ul li ul li ul{ position: relative; padding:0; width:auto; border:none; background:none; }
#megaMenu .leaf li{ clear:both;float:none; width:150px; padding:0 10px; }
#megaMenu .leaf li.item a{ text-transform: none; font-size:1px; padding:0 0 0 6px; padding-left:15px; line-height:1em; background:url(../images/right.gif) left 15px no-repeat; border-bottom:none;}
#megaMenu .leaf li.item a span{ display:block; background:none; font-size:12px; color:#222222; font-weight:normal; height:auto; line-height:35px; padding:0; text-transform:none; }
#megaMenu .leaf li.selected > a span{ color:#333333; cursor:pointer; }
#megaMenu .leaf li li{ clear:both;float:none; width:130px; }

#megaMenu ul li ul li ul li a{ color:#222222; text-transform: none; font-size:12px; padding:8px 0 8px 5px; line-height:1em; background:url(../images/right.gif) left 12px no-repeat; border-bottom:none;}
#megaMenu ul li ul li ul li a:hover{ background:url(../images/right.gif) left 12px no-repeat; text-decoration:underline;}

#megaMenu img.mmIcon {max-height:24px; margin-right: 7px; vertical-align: middle;}
#megaMenu img.rootIcon {max-height:30px; margin-right: 6px; vertical-align: middle;}


/*--------- CSS Reset for Mobile ----------*/
@media handheld, only screen and (max-width: 900px) {
body {-webkit-text-size-adjust:none; font-size: 16px;}
.floatl, .floatr{float: none;}
.root {width:100%;}
/*-------- design style --------*/

.mobile_display {display:block; position:relative; margin:0 0 2px 0;}
.mobile_nav {display:block;  position:relative; left:0px; top:0; width:120px; height:36px;}
.menuclick {background:url(../images/mobileUI_nav.png) no-repeat center 0; width:120px; height:36px; padding:0; margin: 0 auto; margin-top:7px; display: block; text-decoration: none;}
.mobile_nav_up {background:url(../images/mobileUI_nav.png) no-repeat center -74px; }
.click_img { width:94px; height:36px;}
nav {float:right; padding:0px;}
#nav_box {display:none; width:100%;}


.xnav > li > div {
	position: relative;
      	background-color:#cbcbcb;
	padding: 0;
	box-shadow: 0 2px 3px rgba(0,0,0,0.1);
text-align: left;	
}

.xnav > li > div p { color: #666; }
.xnav > li > div.right { right: 0; left: auto }

#megaMenu .root .selected  {background-color:#cbcbcb;}
#megaMenu .root .haschild {background-color:#cbcbcb; background-image:none;}

/*--------- MegaMenu style ----------*/
#megaMenu {width:auto;}
#megaMenu ul { padding:0; margin-top:13px; margin-bottom:4px}
#megaMenu .root li{ width:100%; float:none; margin-bottom:2px; text-align:left; background:none; }
#megaMenu li.back{ background:none;}
#megaMenu li.back .left{ background:none; height:0; margin-left:0;}
#megaMenu li.back .center{ background:none; height:0; margin:0;}

#megaMenu .root li a{display:block; background:url(../images/mobile_menu_left.png) no-repeat left center, url(../images/mobile_menu_right.png) no-repeat right center, url(../images/mobile_menu_top.png) no-repeat top right, url(../images/mobile_menu_bottom.png) no-repeat bottom left; background-color:#e6e6e6; padding:0;}
#megaMenu .root li.breadcrumb a {}
#megaMenu .root li.selected a, #megaMenu .root li.rmHover a, #megaMenu .root li a:hover, #megaMenu .root li:hover a {margin:0;}

#megaMenu .root li a span {display:block; padding:0 20px; color:#000; white-space:nowrap; font-size:13px; font-weight:bold; text-transform:uppercase; margin-right:0; margin-left:3px; height:38px; line-height:38px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); position:relative;}
#megaMenu .root li.selected a span,#standardMenu .root li.breadcrumb a span,#standardMenu .root li.rmHover a span,  #standardMenu .root li:hover a span, #standardMenu .root li a:hover span{text-decoration:none; font-style:italic; background:none; color:#000; font-weight:bold; } /** selected entry**/

#megaMenu .root a span .navarrow{ position:absolute; width:60px; height:38px; margin-right:0; right:0px; background:url(../images/mobile_navarrow.png) no-repeat center 0; border-left:2px solid; border-color:#fff;}
#megaMenu .root li.selected a span .navarrow, #megaMenu .root li.breadcrumb a span .navarrow, #megaMenu .root li.rmHover a span .navarrow, #megaMenu .root li:hover a span .navarrow, #megaMenu .root li a:hover span .navarrow{margin-right:0; background:url(../images/mobile_navarrow.png) no-repeat center 0; }

#megaMenu .root a span .navarrow2{ position:absolute; width:60px; height:38px; margin-right:0; right:0px; background:url(../images/mobile_navarrow.png) no-repeat center -42px;}
#megaMenu .root li.selected a span .navarrow2, #megaMenu .root li.breadcrumb a span .navarrow2, #megaMenu .root li.rmHover a span .navarrow2, #megaMenu .root li:hover a span .navarrow2, #megaMenu .root li a:hover span .navarrow2{ margin-right:0; background:url(../images/mobile_navarrow.png) no-repeat center -42px; }

/*-- submenu --*/
#megaMenu .category{background:none; background-color:#cbcbcb; left:0; position:static; width:auto; margin-top:0px; padding:0; border:0px solid; -webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
#megaMenu .category li{ float:none; clear:both; width:100%; padding:0; margin:0;}
#megaMenu .category li.item a{ border-bottom:1px solid #bababa; margin:0; padding:0; height:auto; background:none;}
#megaMenu .category li.last a { border-bottom:none;}
#megaMenu .category li.haschild > a {}
#megaMenu .category li.item a span{padding:0 35px 0 35px; color:#000; border-top:1px solid #bababa;}
#megaMenu .category li.item a:hover span, #megaMenu .category li.selected a span{color:#000; cursor:pointer;}

/* -- SUBSUB --*/
#megaMenu .leaf{display:block; position:static; width:auto; margin:0; padding-left:35px; border:none; top:0; -webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
#megaMenu .leaf li.last > a{border-bottom:1px solid rgba(234,234,234,.1);}
#megaMenu .leaf li.item a span{display:block; background:none; font-size:12px; font-weight:normal; white-space:nowrap; height:35px; line-height:37px; padding:0 35px 0 15px; text-transform:none; background:url(../images/right.gif) left 15px no-repeat; border:0px;}
#megaMenu .leaf li.item a span:hover{background:url(../images/right.gif) left 15px no-repeat;}
#megaMenu .leaf li.selected > a span{}
#megaMenu .category li.rmhover > .leaf{display:block;}
#megaMenu .leaf li li, #megaMenu .leaf li li li {width:auto;}
}

#megaMenu .root li:hover .category { display:block;} 

/*--------- CSS Reset for Tablet ----------*/
@media handheld, only screen and (max-width: 970px){
#megaMenu .root li a span {padding:0 7px;}
}


@media handheld, only screen and (max-width: 800px){

#megaMenu .root li a span {padding:0 20px;}
#megaMenu .root li:hover .category  {display:none;}
}

#nav_box.active { 
    display: block; 
}

/* --- DESKTOP LOGIK (ab 960px) --- */
@media (min-width: 960px) {
    #megaMenu .navarrow { display: none !important; }

    #megaMenu .category {
        display: block !important; 
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px);
        /* Einzelne Eigenschaften zu animieren ist sauberer als 'all' */
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
        pointer-events: none;
        position: absolute;
        z-index: 999;
    }

    /* Der Hover-Effekt auf dem Listenpunkt */
    #megaMenu .root > li.haschild:hover > .category {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

    
/* --- MOBILE: Pfeile anzeigen und stylen --- */
@media (max-width: 959px) {
  /* Wichtig: Startzustand für DNN AJAX-Stabilität */
    #nav_box { display: none; } 
    #megaMenu .navarrow {
        display: inline-block !important; /* Stellt sicher, dass sie sichtbar sind */
        width: 20px;
        height: 20px;
        margin-left: 10px;
        vertical-align: middle;
        background-image: url(images/mobile_navarrow.png); /* Prüfe, ob der Pfad zu deinem Pfeil-Bild stimmt */
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    /* Wenn das Bild nicht lädt, nutzen wir einen einfachen CSS-Pfeil als Fallback: */
    #megaMenu .navarrow:empty::before {
        content: '▼'; 
        font-size: 20px;
        margin-left: 15px;
        color: #990e1d;
        display: inline-block;
    }

    /* Rotation des Pfeils wenn offen */
    .navarrow2 {
        transform: rotate(180deg); 
    }
}


@media (min-width: 960px) {
    .mobile_display { display: none; }
}

@media (max-width: 959px) {
    .mobile_display { display: block; }
}

/* Container für das Icon */
.menuclick {
    display: block;
    width: 40px;
    height: 40px;
    position: relative;
    padding: 10px;
}

/* Der Hamburger-Strich (Mitte) */
.click_img {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #333; /* Deine Wunschfarbe für die Linien */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: background 0.3s ease;
}

/* Oberer und unterer Strich via Pseudo-Elemente */
.click_img::before,
.click_img::after {
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background-color: #333;
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}

.click_img::before { top: -8px; } /* Abstand nach oben */
.click_img::after { bottom: -8px; } /* Abstand nach unten */

/* --- ANIMATION: Hamburger wird zum X wenn offen --- */
.mobile_nav_up .click_img {
    background-color: transparent; /* Mittlere Linie verschwindet */
}

.mobile_nav_up .click_img::before {
    top: 0;
    transform: rotate(45deg);
}

.mobile_nav_up .click_img::after {
    bottom: 0;
    transform: rotate(-45deg);
}